Pseudo Seletores CSS3 (Pseudo Selectors)

O CSS (Cascade Style Sheets) é utilizado para controlar o layout das páginas web. O CSS3 é a ultima versão, que traz muitos recursos interessantes que facilitam a vida dos designers de interface de websites. Esse post falará mais especificamente dos pseudo seletores que foram introduzidos pela W3C nessa nova versão do CSS3. Os pseudo seletores são regras que completam os seletores, e são caracterizados por possuir um “:” separando o seletor, dele mesmo. É importante lembrar que infelizmente, embora o CSS3 seja amplamente suportado pelas ultimas versões dos principais navegadores, se você utiliza uma versão antiga ou um navegador incomum você não terá suporte á estas maravilhas.


Seletor:

:first-of-type

Exemplo de utilização:

p:first-of-type

O que ele faz?
Seleciona todos os elementos p que são os primeiros filhos p de seus respectivos pais.


Seletor:

:last-of-type

Exemplo de utilização:

p:last-of-type

O que ele faz?
Seleciona todos os elementos p que são os últimos filhos p de seus respectivos pais.


Seletor:

:only-of-type

Exemplo de utilização:

p:only-of-type

O que ele faz?
Seleciona todos os elementos p que são os únicos filhos p de seus respectivos pais.


Seletor:

:only-child

Exemplo de utilização:

p:only-child

O que ele faz?
Seleciona todos os elementos p que são os únicos filhos de seus respectivos pais.


Seletor:

:nth-child(n)

Exemplo de utilização:

p:nth-child(3)

O que ele faz?
Seleciona todos os elementos

que são exatamente o terceiro filho de seu pai.


Seletor:

:nth-last-child(n)

Exemplo de utilização:

p:nth-last-child(3)

O que ele faz?
Seleciona todos os elementos que são exatamente o terceiro filho de seu pai, contando a partir do último elemento.


Seletor:

:nth-of-type(n)

Exemplo de utilização:

p:nth-of-type(3)

O que ele faz?
Seleciona todos os elementos que são exatamente o terceiro filho p de seu pai.


Seletor:

:nth-last-of-type(n)

Exemplo de utilização:

p:nth-last-of-type(3)

O que ele faz?
Seleciona todos os elementos que são exatamente o terceiro filho p de seu pai, contando a partir do último elemento.


Seletor:

:last-child

Exemplo de utilização:

p:last-child

O que ele faz?
Seleciona todos os elementos que é o último filho de seu pai.


Seletor:

:root

Exemplo de utilização:

:root

O que ele faz?
Seleciona o elemento root do documento.


Seletor:

:empty

Exemplo de utilização:

p:empty

O que ele faz?
Seleciona todos os elementos p que não possuem filhos, incluindo nós de texto.


Seletor:

:target

Exemplo de utilização:

#portfolio:target

O que ele faz?
Seleciona o elemento que está ativo, ou seja, clicado através de uma URL que contém uma âncora.


Seletor:

:enabled

Exemplo de utilização:

input:enabled

O que ele faz?
Seleciona todos os elementos input que estão habilitado (com a propriedade disabled=”false”).


Seletor:

:disabled

Exemplo de utilização:

input:disabled

O que ele faz?
Seleciona todos os elementos input que estão desabilitados (com a propriedade disabled=”true”).


Seletor:

:checked

Exemplo de utilização:

input:checked

O que ele faz?
Seleciona todos os elementos input que estão “checados” (selecionados. Por exemplo: um checkbox que o usuário checou).


Seletor:

:not(SELETOR)

Exemplo de utilização:

not(p)

O que ele faz?
Seleciona todos os elementos que não são elemento p.


Seletor:

::selection

Exemplo de utilização:

::selection

O que ele faz?
Seleciona a porção de um elemento que está selecionada por um usuário.


Vale a atenção especial para alguns pseudo seletores. Por exemplo, o pseudo seletor :not é fantástico. Com ele você pode começar a criar regras css adicionando excessões a ela. Dentro do pseudo seletor :not você pode inserir qualquer outro seletor css (com classes, ids, etc).
Outro pseudo seletor que merece uma atenção especial é o :nth-child(n). Com ele você pode selecionar um elemento que está em qualquer ordem que desejar. Antes, no CSS2 só poderíamos selecionar os primeiros ou últimos.