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 tamé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 indormaçõ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

Etiquetas do documento e colaboradores

Colaboradores desta página: Lukff, kelvyncosta
Última atualização por: Lukff,