Seletores CSS

Esta tradução está incompleta. Ajude atraduzir este artigo.

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: tagname
Exemplo: input corresponderá a qualquer elemento <input>.
Seletor por classe
Este seletor básico escolhe elementos baseados no valor de seu atributo classe. Sintaxe: .classname
Example: .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: #idname
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: * ira 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: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
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
Exmeplo: div span irá corresponder a todo e qualquer elemento <span> que estiver dentro do elemento <div>.

Pseudo-elementos

Pseudo-elementos são asbtrações da árvore que representa entidades além do que o HTML faz. Por exemplo, o HTML não tem um elemento que descreve a primeira letra ou linha de um parágrafo, ou o marcados de um 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.

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.

Especificações

Especificação Status Comentário
Selectors Level 4 Working Draft  
Selectors Level 3 Recommendation  
CSS Level 2 (Revision 1) Recommendation  
CSS Level 1 Recommendation Definição inicial

Compatibilidade de navegadores

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1 1.0 (1.7 or earlier) 3.0 3.5 1.0
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 1.5 1.0 (1.9.2) ? ? 3.2

Etiquetas do documento e colaboradores

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