CSS3 – Combinando seletores com pseudo-elementos!

O CSS3 é fantástico e isto é fato, repleto de possibilidades extremamente úteis utilizando seletores e pseudo-elementos, além também dos efeitos e transições sensacionais que são possíveis de se fazer.

Trabalhando em um projeto tive a necessidade de combinar estes para customização de um menu em uma lista <li>.

Vamos lá, o que eu precisava era reproduzir o menu desta forma:
Opção 1 | Opção 2 | Opção 3

Especificamente no último item não seria necessário o uso do caracter de divisor “|”.

Sendo assim, precisaria utilizar o seletor :after para que com a propriedade “content”, fosse adicionada o “|” depois de cada <li>.

Ok, tudo certo, no entanto o que agora estava ocorrendo era o menu estar da seguinte maneira:
Opção 1 | Opção 2 | Opção 3 |

Era necessário que a última tag <li> não tivesse a atribuição do seletor :after.

Para isso foi necessário uma mescla com estes seletores, ou seja, utilizando o seletor :not() passando como parâmetro o :last-of-type seguido do :after, com isto o resultado foi:

Basicamente o que eu estou dizendo ao CSS é para utilizar o content “|” após cada tag <li> com exceção da última.

E meu resultado é:
Opção 1 | Opção 2 | Opção 3

O mar de possibilidades utilizando seletores e pseudo-elementos com CSS3 é imenso, poderoso e extremamente útil.

Recomendo a leitura do blog http://css-tricks.com/ que é repleto de excelentes informações a respeito disto e muito mais!

Suporte do :after e :before nos navegadores: http://css-tricks.com/browser-support-pseudo-elements/
Suporte do :not(): http://www.w3schools.com/cssref/sel_not.asp

É isso pessoal, espero que tenha sido útil e, de alguma maneira, ajude em algum projeto de vocês!

Grande abraço!