De acordo com as Leis 12.965/2014 e 13.709/2018, que regulam o uso da Internet e o tratamento de dados pessoais no Brasil, ao me inscrever na newsletter do portal DICAS-L, autorizo o envio de notificações por e-mail ou outros meios e declaro estar ciente e concordar com seus Termos de Uso e Política de Privacidade.

Introdução aos seletores CSS

Colaboração: Maurício (Maujor) Samy Silva

Data de Publicação: 26 de setembro de 2017

Definições

Seletor

É uma estrutura condicional destinada a selecionar um ou mais elementos da árvore do documento.

Diz-se que um seletor CSS seleciona um (ou mais) elemento(s) da marcação quando a estrutura condicional resulta, ou casa, ou aponta, para o(s) elemento(s) por ele selecionados. O(s) elemento(s) selecionado(s) é(são) o(s) alvo(s) do seletor.

Seletores CSS são usados para se definir regras CSS a serem aplicadas ao(s) elemento(s) com o(s) qual(is) casam.

Seletor simples

Os seletores simples e seus alvos são listados a seguir:

  • Seletor universal - todos os elementos da marcação.
  • Seletor tipo - determinado elemento da marcação.
  • Seletor ID - elemento da marcação com determinado valor de atributo id.
  • Seletor classe - elemento da marcação selecionado com base no valor do atributo class.
  • Seletor de atributo - elemento da marcação selecionado com base no nome e/ou valor de um atributo.
  • Pseudoclasse - elemento da marcação selecionado com base em informações não contidas explicitamente na árvore do documento.

Seletor composto

O encadeamento de dois ou mais seletores simples separados por elementos de combinação formam um seletor composto.

Elemento de combinação

Elemento de combinação é um sinal gráfico destinado a separar seletores simples com a finalidade de se criar seletores compostos.

Os elementos de combinação de seletores e seus significados listados a seguir:

  • E F (espaço em branco) casa com elemento F que é descendente do elemento E.
  • E > F (sinal >) casa com elemento F que é elemento-filho do elemento E.
  • E + F (sinal +) casa com o único elemento F que se segue a E e é elemento irmão do elemento E.
  • E ~ F (sinal ~) casa com todos os elementos F que são elementos irmãos do elemento E.

Pseudoelemento

Pseudoelementos são adicionados aos seletores e permitem casar com partes do documento não explicitamente contidas na árvore do documento, tais como a primeira letra ou a primeira linha de um parágrafo.

Sintaxe

Um seletor é uma cadeia composta de um ou mais seletores simples separados por elementos de combinação podendo ou não terminar com um pseudoelemento.

Observe a seguir exemplos da sintaxe de seletores CSS para um documento HTML.

Exemplo Explicação
p { ... } seletor simples de parágrafos
div p { ... } seletor composto descendente
#div { ... } seletor ID
.destaque { ... } seletor classe
input[type='password"] { ... }
seletor de atributo
*{ ... } seletor universal
section > div p { ... } seletor composto descendentes de elemento-filho
h2 + p { ... } seletor irmão imediatamente adjacente
h1 ~ p { ... } seletor irmãos em geral
h2:first-letter { ... } pseudoelemento

Sobre o autor

Maurício Samy Silva também conhecido como "Dinossauro das CSS" ou simplesmente Maujor® é graduado em Engenharia Civil pelo Instituto Militar de Engenharia (IME).

No segundo semestre de 2003, com a pretensão de suprir a falta de material de consulta gratuita, em língua portuguesa, na internet, decidiu criar o site de tutoriais denominado Maujor, hospedado em http://www.maujor.com/ e destinado a divulgar as técnicas de desenvolvimento frontend. Maujor é autor de 15 livros de desenvolvimento web (http://livrosdomaujor.com.br) e está escrevendo mais um sobre CSS Grid Layout com previsão de lançamento em novembro de 2017.

Saiba mais: Facebook , Twitter.

Adicionar comentário

* Campos obrigatórios
5000
Powered by Commentics

Comentários

Nenhum comentário ainda. Seja o primeiro!


Veja a relação completa dos artigos de Maurício (Maujor) Samy Silva