Vários pedaços de madeira empilhados

CSS level 4: seletor not

No CSS3 já era possível excluir um elemento de uma seleção. Algo mais ou menos assim:

p:not(.highlight) {
  color: blue;
}

No exemplo acima, selecionamos todos elementos p exceto as que tem a classe highlight. Já é coisa linda, certo? Mas se quiséssemos colocar um filtro a mais na negação não é possível. Aí vem o CSS level 4 e dá uma tunada nisso.

p:not(:first-child, :last-of-type, .highlight) {
  color: blue;
}

No exemplo acima, conseguimos selecionar todos elementos p excluindo os que são :first-child, :last-of-type e que possuem a classe highlight.

See the Pen :not selector by Raphael Fabeni (@raphaelfabeni) on CodePen.

Aqui é possível ver um exemplo com os códigos acima.

Gostou? Escrevi alguma groselha? Quer melhorar? Abra uma issue mencionando o post e vamos conversar.

See all posts...