Dois cachorros quase em pé olhando para a foto

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:

@custom-selector :--button button, .btn, input[type="submit"];

:--button {
  /* css magic */ 
}

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:

@custom-selector :--enter :hover, :focus, .is-hover;
@custom-selector :--active :active, .is-active;

:--button:--enter {
  /* :hover, :focus and .is-hover styles */
}

:--button:--active {
  /* :active and .is-active styles */
}

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:

:--button:matches(:hover, :focus, .is-hover) {
  /* :hover, :focus and .is-hover styles */
}

:--button:matches(:active, .is-active) {
  /* :active and .is-active styles */  
}

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.

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

See all posts...