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,:focuse os elementos com classeis-hoverem:--enter. - Armazenar o estados
:activee os elementos com a classe.is-activeem:--active. - Juntamos tudão: tudo que haviámos armazenado em
:--buttoncom:--entere:--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.