CSS level 4: custom selectors

The possibility to stock some values in variables was one of the main features among others, in my opinion, to the growth of the adoption of the pre-processor. What if we could store selectors? Yes, I will cry. ʘ‿ʘ

It is possible to do something like that:

What we did was store all the elements button and input[type="submit"] and also every element with btn class in :--button. Then, we declare the style rules in :--button.

Based on this, we can play a bit more and do something like:

What we did above was:

• Store the states :hover, :focus and all the elements with the class is-hover in :--enter.
• Store the states :active and all the elements with the class .is-active in :--active.
• We put everything together: everything in :--button with :--enter and :--active.

We could also get the same result using our friend matches:

The difference, remembered by my friend Rafael Rinaldi is that our great custom selectors is a choice of preset compared with matches, which makes more easy to reuse.

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

Here the link with the example above.