| Seletor | Significado | Exemplo | Utilidade |
|---|---|---|---|
| Seletor universal | Aplica-se em todos os elementos no documento | *{} | Seleciona todos os elementos da página |
| Seletor de texto | Seleciona elementos pelo tipo | H1, h2, h3 {} | Seleciona os elementos <h1>, <h2> e <h3> |
| Seletor de classe | Seleciona um elemento cujo atributo class tem o valor especificado depois do ponto | .verde{} ou p.verde{} |
.verde{} Seleciona qualquer elemento cujo atributo class tem o valor “verde” p.verde{} Seleciona somente elemento <p> cujo atributo class tem o valor “verde” |
| Seletor de ID | Seleciona um elemento cujo atributo id tem o valor especificado após o símbolo de cerquilha ou jogo da velha | #cabecalho{} | Seleciona o elemento cujo atributo id tem o valor “cabecalho” |
| Seletor de filho | Seleciona um elemento que é filho direto de outro | li>a {} | Seleciona quaisquer elementos <a> que são filhos de um elemento <li> |
| Seletor de descendente | Seleciona um elemento que é descendente de outro elemento especificado (e não apenas filho direto desse elemento) | p a {} | Seleciona quaisquer elementos <a> que residem dentro de um elemento <p>, mesmo e houver outros elementos aninhados entre eles |
| Seletor de irmão adjacente | Seleciona um elemento que é o irmão próximo de outro | h1+p {} | Seleciona o primeiro elemento <p> depois de qualquer elemento <h1> (mas não outros elementos ) |
| Seletor de irmão geral | Seleciona um elemento que é um irmão de outro, embora ele não precise ser o elemento diretamente precedente | h1~p {} | Se houvesse dois elementos <p> que fossem irmãos de um elemento <h1>, essa regra se aplicaria ao dois |