Hocus pocus: custom selectors
This spec allows you to define your own selector as an alias for a list of other selectors …
I started building websites about 15 years ago. Two weeks ago I wrote down a:hover, a:focus {…}
for what felt like the millionth time. Something snapped and I quipped the following on twitter:
I'm tired of always having to type 'a:hover, a:focus {}', I therefore propose a new pseudoclass that combines them: a:hocus {}
— Kilian Valkhof (@kilianvalkhof) January 31, 2014
That throwaway Friday afternoon tweet got 50+ retweets, 30+ favorites and a whole bunch of interesting replies. Those replies included one that pointed me to a draft Spec about CSS Aliases. CSS Aliases look interesting and you can read a bit about them at the end of this blog post.
Here’s a list of the replies I got. It includes suggestions, ways you can already use (something like) :hocus
and how it might be possible in the future.
@dorward @kilianvalkhof @brucel \o/ great idea!
— Manuel Strehl (@m_strehl) January 31, 2014
@kilianvalkhof @brucel Hahaha! So awesome I nearly choked on my coffee. a:hocus {} has a nice ring though.
— William Dodson (@williamvdodson) January 31, 2014
A bunch of other people wanted to add a :pocus
pseudoclass for various reasons:
@kilianvalkhof @vasilis Then I want a pocus too.
— job (@Sturmmm) January 31, 2014
@kilianvalkhof @brucel And a:pocus {} for any keyboard event.
— David Dorward (@dorward) January 31, 2014
And a:pocus{}! MT @kilianvalkhof I'm tired of typing 'a:hover, a:focus {}', I propose a new pseudoclass that combines them: a:hocus {}
— Cordelia (@cordeliadillon) February 1, 2014
@kilianvalkhof @dennisl and a touch pseudo class called a:pocus
— Joe Dolson (@joedolson) February 1, 2014
…Or a :focer {}
@kilianvalkhof @brucel a:focer {} would be better, I think
— Stuart Langridge (@sil) January 31, 2014
There was a whole lot of talk about css preprocessors:
@kilianvalkhof @dennisl if you use vim, you could do it as an abbreviation. In SASS, you can do it as a mixin.
— Andrew Woods (@awoods) February 1, 2014
@kilianvalkhof @vasilis Pre-processor anyone? :-)
— Roy Tomeij (@roy) January 31, 2014
@kilianvalkhof @iandevlin Could be part of @SassCSS and would be outputted as two individual classes, would be pretty cool :D
— Sara Soueidan (@SaraSoueidan) January 31, 2014
@awoods Neat ideas. Maybe I'll try it in LESS :-) @kilianvalkhof @JoeDolson
— Dennis Lembrée (@dennisl) February 1, 2014
Before the end of the day, @SassCSS made a mixin which, although actually more verbose, is pretty cool:
@SaraSoueidan @iandevlin @kilianvalkhof https://t.co/lNaVzeu0zN
— SassCSS (@SassCSS) January 31, 2014
And just to prove that everything has been invented already, CSS-Crush already includes both a :hocus
and a :pocus
:
@kilianvalkhof has existed here for several years http://t.co/Mi2fBI5SlV
— シ (@pete_b) February 2, 2014
@kilianvalkhof @brucel Soon®, you’ll be able to write @custom-selector :_hocus :hover, :focus; thanks to @tabatkins’s http://t.co/ekl2n15zrt
— Simon Sapin (@SimonSapin) January 31, 2014
In the linked CSS Aliases proposal is a part about Custom Selectors. Custom selectors allow you to name your own selector (but it has to start with an underscore) and combine that with a list of selectors. If this gets implemented, we can almost get our :hocus
and :pocus
pseudoclasses:
@custom-selector :_hocus a:hover, a:focus;
@custom-selector :_pocus a:hover, a:focus, a:active;
:_hocus { /* style for a's with hover and focus */ }
:_pocus { /* style for a's with hover, focus and active */ }
Pretty cool, though I’m not sure you can use this to make a custom pseudoclass as opposted to a custom selector. Then you could actually write “a:_hocus{}
“. In any case this is just a draft proposal, and a young one at that. It’s not clear yet where it will go, or if it will get implemented at all.
I know this isn’t much of a full article, especially after three years of silence. But it was cool to see so many people respond to a fun little idea, and I wanted to share that!
This spec allows you to define your own selector as an alias for a list of other selectors …
Back in 2014, nearly three years ago, I wrote about being tired of always writing a:hover, a:focus and wanting an a:hocus to do both for me. It got a lot of proposed solutions, including a Sass and a future-css one using CSS Aliases. In 2016, a year ago, I revisited the idea with CSS Custom…
There are many different ways to achieve the same layout in CSS and HTML. Some are now frowned upon, like tables or floats, and others tend to overlap somewhat, but have a clear specific purpose, like Flexbox and Grid. But CSS has another layout engine, and it’s one that has been part of CSS since…