Seletor é uma entidade que faz parte da regra CSS e define o alvo dessa regra. O alvo é um elemento integrante da árvore do documento HTML (ou elementos). Vejamos a sintaxe da regra CSS:
seletor {propriedade: valor;}
A formatação definida entre as chaves será aplicada ao(s) elemento(s) selecionado(s). Encontram-se listadas as propriedades e seus respectivos valores em Propriedades CSS - Guia de Referência.
Um seletor pode ser simples ou combinado. Um seletor simples é um seletor qualquer sozinho, já um seletor combinado consiste de dois ou mais seletores simples separados por um elemento de combinação. Os elementos de combinação são o espaço em branco, o sinal maior que (>) e o sinal de adição (+). Esses elementos de combinação definem respectivamente o seletor descendente, o seletor filho e o seletor adjacente filho do mesmo pai (irmão).
Existem também os seletores de pseudo-classes e de pseudo-elementos que se baseiam em informações que não estão presentes na árvore do documento HTML, mas que funcionam como um apêndice a um seletor que tem como alvo um elemento que integra essa árvore. São caracterizados por dois-pontos que os antecedem. Apenas o último seletor simples que faz parte de um seletor combinado pode possuir esse apêndice.
A seguir, com base nas especificaões CSS 2.1, 5 - Selectors, do W3C, são apresentados os seletores CSS 2, seu formato e sua descrição.
| Seletor | Formato | Descrição |
|---|---|---|
| Seletor universal | * | Incide sobre qualquer elemento. |
| Seletor de tipo | E | Incide sobre qualquer elemento E. |
| Seletor descendente | E F | Incide sobre qualquer elemento F que seja descendente de um elemento E. |
| Seletor filho | E > F | Incide sobre qualquer elemento F que seja filho de um elemento E. |
| Seletor adjacente | E + F | Incide sobre qualquer elemento F que esteja imediatamente após um elemento E e que seja filho do mesmo pai (irmão). |
| Seletor de classe | E.myclass | Incide sobre qualquer elemento E que possua o atributo class com o valor "myclass". |
| .myclass | Incide sobre qualquer elemento que possua o atributo class com o valor "myclass". | |
| Seletor de ID | E#myid | Incide sobre qualquer elemento E que possua o atributo id com o valor "myid" (apenas um em cada documento). |
| #myid | Incide sobre qualquer elemento que possua o atributo id com o valor "myid" (apenas um em cada documento). | |
| Seletor de atributo | E[att] | Incide sobre qualquer elemento E que possua o atributo att (independentemente do valor do atributo). |
| E[att=val] | Incide sobre qualquer elemento E que possua o atributo att com o valor val. | |
| E[att~=val] | Incide sobre qualquer elemento E que possua o atributo att cujo valor seja formado de palavras separadas por espaços e que uma dessas palavras seja val. | |
| E[att|=val] | Incide sobre qualquer elemento E que possua o atributo att cujo valor seja formado de palavras separadas por hifens e que a primeira dessas palavras seja val. | |
| pseudo-classe :first-child |
E:first-child | Incide sobre qualquer elemento E que seja o primeiro filho de seu elemento pai. |
| pseudo-classes link | E:link | Incide sobre qualquer elemento E que seja um link e que ainda não não tenha sido visitado. |
| E:visited | Incide sobre qualquer elemento E que seja um link e que já tenha sido visitado. | |
| pseudo-classes dinâmicas (respondem à ação do usuário) |
E:hover | Incide sobre qualquer elemento E, quando o usuário coloca o cursor do mouse sobre ele. |
| E:active | Incide sobre qualquer elemento E, quando este é ativado pelo usuário. Um elemento está ativado enquanto está sendo clicado, ou melhor, equanto se mantém o mouse pressionado sobre ele. | |
| E:focus | Incide sobre qualquer elemento E, quando este recebe o foco. Ou seja, quando aceita eventos de teclado. | |
| pseudo-classe :lang() |
E:lang(c) | Incide sobre qualquer elemento E escrito na linguagem c (um idioma humano; não uma linguagem de marcação). |
| pseudo-elementos | E:first-line | Incide sobre a primeira linha do conteúdo de qualquer elemento E. |
| E:first-letter | Incide sobre a primeira letra do conteúdo de qualquer elemento E. | |
| E:before | Incide sobre qualquer elemento E, gerando para ele um conteúdo que é inserido antes do conteúdo preexistente. | |
| E:after | Incide sobre qualquer elemento E, gerando para ele um conteúdo que é inserido depois do conteúdo preexistente. |