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.