Kilian Valkhof

Hocus Pocus, CSS Aliases

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

CSS Aliases

@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!