Seletores CSS

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 Exemplo: .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 > seleciona 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 BExemplo: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