Manual de Referência de Seletor CSS

Seletores CSS

Seletores CSS são usados para "encontrar" (ou escolher) os elementos HTML que você deseja estilizar.

Use nosso teste de seletor CSS para demonstrar diferentes seletores.

Seletores simples CSS

Seletores simples escolhem elementos com base no nome do elemento, id e classe. Além disso, há seletores genéricos (*)

Seletor Exemplo Descrição do exemplo
elemento p Seletor que escolhe todos os elementos <p>.
#id #firstname Seletor que escolhe o elemento cujo atributo id é "firstname".
* * Seletor que escolhe todos os elementos.
.class .intro Seletor que escolhe todos os elementos cujo atributo class é "intro".

Seletor de atributo CSS

Seletores de atributo escolhem elementos HTML com um conjunto de atributos dados.

Seletor Exemplo Descrição do exemplo
[attribute] [target] Seletor que escolhe todos os elementos cujo atributo target existe.
[attribute=value] [target=_blank] Seletor que escolhe todos os elementos cujo atributo target é "_blank".
[attribute~=value] [title~=flower] Seletor que escolhe todos os elementos cujo atributo title contém a palavra "flower".
[attribute|=value] [lang|=en] Seletor que escolhe todos os elementos cujo valor de atributo lang começa com "en".
[attribute^=value] a[href^="https"] Seletor que escolhe cada elemento <a> cujo atributo href começa com "https".
[attribute$=value] a[href$=".pdf"] Seletor que escolhe cada elemento <a> cujo atributo src termina com ".pdf".
[attribute*=value] a[href*="codew3c"] Seletor que escolhe cada elemento <a> cujo valor de atributo href contém a substring "abc".

Seletor de seleção aninhado do CSS

Seletor Exemplo Descrição do exemplo
& & Aplicar estilo a um elemento em contexto de outro elemento