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>.
1 2 3 4 5 | <ul> <li>Opção 1</li> <li>Opção 2</li> <li>Opção 3</li> </ul> |
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:
1 2 3 | .customListLinks li:not(:last-of-type):after { content:' |'; } |
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!