CSS level 4: custom selectors

A possibilidade de armazenar valores em variáveis foi um dos pontos principais pontos dentre outros, na minha opinião, para o crescimento da adoção dos pré processadores. E se pudéssemos armazenar seletores? Sim, vou chorar. ʘ‿ʘ

É possível fazermos algo assim:

O que fizemos acima foi armazenar todos os elementos button e input[type="submit"] e também com a classe btn em :--button. Feito isso, declaramos as regras de estilo direto em :--button.

Com base nisso, podemos brincar um pouco mais e fazermos algo do tipo:

O que fizemos na brincadeira acima foi:

  • Armazenar os estados :hover, :focus e os elementos com classe is-hover em :--enter.
  • Armazenar o estados :active e os elementos com a classe .is-active em :--active.
  • Juntamos tudão: tudo que haviámos armazenado em :--button com :--enter e :--active.

Podíamos também chegar no mesmo resultado usando o nosso amigo matches:

A diferença, apontada pelo meu amigo Rafael Rinaldi é que o grande custom selectors é uma opção de preset se comparado com o matches, o que o deixa mais fácil de reutilizar.

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

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

See all posts...