Kilian Valkhof

Front-end & user experience developer, Jedi.

Hocus Pocus, CSS Aliases

CSS & HTML, 17 February 2014, 3 minute read

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

— 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

— シ (@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

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

Thanks for Reading!

I am Kilian Valkhof, a front-end and user experience developer from the Netherlands.
Contact me or ping me on twitter.

Be the first to know about new releases!

Newsletter subscribers will be the first to know about new apps I release or new articles I write, here or elsewhere.

Low-volume. I will only email you when I have something exciting to share.