Seletores CSS

Os Seletores definem quais elementos um conjunto de regras CSS se aplica.

Seletores Básicos

Seletor por tag
Este seletor básico escolhe todos os elementos que correspondem ao nome fornecido.
Sintaxe: nome-da-tag
Exemplo: input corresponderá a qualquer elemento <input>.
Seletor por classe
Este seletor básico escolhe elementos baseados no valor de seu atributo classe. Sintaxe: .nome-da-classe
Examplo: .index irá corresponder a qualquer elemento que tenha o índice de classe (provavelmente definido por um atributo class="index", ou similar).
Seletor por ID
Este seletor básico escolhe nós baseados no valor do atributo id. Deve existir apenas um elemento com o mesmo ID no mesmo documento.
Sintaxe: #nome-do-id
Exemplo: #toc irá corresponder ao elemento que possuir o id=toc (definido por um atributo id="toc", ou similar).
Seletores universais
Este seletor básico irá escolher todos os nós. Ele também existe em um namespace único e em uma variante de todo o namespace também.
Sintaxe: * ns|* *|*
Exemplo: * irá corresponder a todos os elementos do documento.
Seletores por atributo
Este seletor básico ira escolher nós baseados no valor de um de seus atributos, ou até mesmo pelo próprio atributo.
Sintaxe: [atrib] [atrib=valor] [atrib~=valor] [atrib|=valor] [atrib^=valor] [atrib$=valor] [atrib*=valor]
Exemplo: [autoplay] irá corresponder a todos os elementos que possuirem o atributo autoplay (para qualquer valor).

Combinadores

Seletores de irmãos adjacentes
O combinador + seleciona os nós que seguem imediatamente o elemento especificado anteriormente.
Sintaxe: A + B
Exemplo: ul + li irá corresponder a qualquer elemento <li> que segue imediatamente após um elemento <ul>.
Seletores gerais de irmãos
O combinador ~ seleciona os nós que seguem (não necessariamente imediatamente) o elemento especificado anteriormente, se ambos os elementos compartilham o mesmo pai.
Sintaxe: A ~ B
Exemplo: p ~ span irá corresponder a todo elemento <span> que seguir um elemento <p> dentro de um mesmo elemento pai.
Seletor de filhos
O combinador > selecina nós que são filhos diretos do elemento especificado anteriormente.
Sintaxe: A > B
Exemplo: ul > li irá corresponder a todo elemento <li> que estiver diretamente dentro de um elemento <ul> especificado.
Seletor de descendentes
O combinador   seleciona os nós que são filhos do elemento especificado anteriormente (não é necessário que seja um filho direto).
Sintaxe: A B
Exemplo: div span irá corresponder a todo e qualquer elemento <span> que estiver dentro do elemento <div>.

Pseudo-classes

Pseudo-classes permitem selecionar elementos baseados em informações que não estão contidas na árvore de documentos como um estado ou que é particularmente complexa de extrair. Por exemplo, eles correspondem se um link foi visitado anteriormente ou não.

Pseudo-elementos

Pseudo-elementos são asbtrações da árvore que representam entidades além do que o HTML faz. Por exemplo, o HTML não tem um elemento que descreva a primeira letra ou linha de um parágrafo, ou o marcador de uma lista. Os pseudo-elementos representam essas entidades e permitem que as regras CSS sejam associadas a elas. Desta forma, essas entidades podem ser denominadas independentemente.

Especificações

Especificação Status Comentário
Selectors Level 4 Rascunho atual  
Selectors Level 3 Recomendação  
CSS Level 2 (Revision 1) Recomendação  
CSS Level 1 Recomendação Definição inicial

Compatibilidade de navegadores

Estamos convertendo nossos dados de compatibilidade para o formato JSON. Esta tabela de compatibilidade ainda usa o formato antigo, pois ainda não convertemos os dados que ela contém. Descubra como você pode ajudar!

Recurso Chrome Firefox (Gecko) Internet Explorer Opera Safari
Suporte básico 1 1.0 (1.7 or earlier) 3.0 3.5 1.0
Recurso Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suporte básico 1.5 1.0 (1.9.2) ? ? 3.2