Uma caixa de madeira cheia de nozes

CSS level 4: seletor matches

CSS3 já era coisa fina. Agora, na sua versão 4, ou melhor dizendo, em seu nível 4, como será dividido a partir de agora, tem muita coisa bacana. Uma delas é o seletor :matches.

Com ele, podemos substituir por exemplo, uma marcação assim:

div .highlight,
footer .highlight {
  color: blue;
}

Para algo assim:

:matches(div, footer) .highlight {
  color: blue;
}

Ou seja, atacamos toda classe highlight que seja filha de uma div ou footer.

Podemos ainda fazer da maneira inversa, como no exemplo abaixo: onde selecionamos todos elementos p que tenham a classe success ou que seja ":first-child.

p:matches(:first-child, .success) {
  color: green;
}

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

Aqui o link do exemplo acima.

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

See all posts...