Put a Pseudo-Class On It

It’s easy to get into a rut, particularly when I find myself mired in work that doesn’t allow me to peek up from behind Sublime Text long enough to see what’s new and exciting out there. In my spare moments, sure, I’ll pop in on the blogs, the newsletters and the tweets. However, one of my favorite pastimes as of late is to simply dive into Docs and start clicking around. You never know what you might find.

Take pseudo-classes, for example (not to be confused with their more robust siblings, pseudo-elements) — I call on them from muscle memory they are so ingrained in my work. But, as it turns out, that muscle could be stronger: there are a whole bunch of pseudo-classes I did not know exist.

If you’re unsure of the difference between pseudo-classes and pseudo-elements, you can think of the former as being states of an element (hover, focus, linked, active, etc.) while pseudo-elements are parts of the document (before, after, first-letter, etc.).

Without further adieu, and in the grand tradition of the BuzzFeed listicle, I present, ‘The Top 5 Pseudo-Classes I’ve Never Heard Of™’.

5. :empty
   

The :empty pseudo-class will render when the target element is, well, empty. There cannot be any child elements, text or white space within the target element. You can have a comment (but no white space surrounding it). It’s interesting to me mostly for philosophical reasons. The practical implications seem limited to either hiding or highlighting empty elements, the former when you have no alternative and the latter for debugging purposes. Perhaps it could be useful for icons applied to an empty span or empty table cells. It may also be useful for removing pesky empty paragraphs and divs from the document flow that were placed by a rogue WYSIWYG editor.

4. :in-range and :out-of-range
   

This is exclusive to elements that support range limits such as the number or range input. :in-range will be active when the value of the input is within a defined range (set using min and max attributes) while :out-of-range will do the opposite. The obvious advantage here is to add some kind of visual cue that the selection is in range. I can see taking this a step further and having some fun with the graphical design of range sliders in and out of the range values.

3. :optional
   

This makes this list because, while I’m very familiar with the :required and :disabled pseudo-classes, I had no idea :optional exists. It will be active when an input element does not have the required attribute set. The practical implications are not obvious, but I can see it being useful in situations where you’re using other selectors to create an effect. For example, where a paragraph following an :optional input element should be targeted specifically, input:optional + p. Or, if your forms are mostly required, it may simply be more convenient to use.

2. :fullscreen
   

The :fullscreen pseudo-class will be applied when an element is in fullscreen mode. The fullscreen API has yet to be fully standardized, so it’s not surprising that I’ve not heard of the :fullscreen pseudo-class. It’s intriguing to think about, however. How would full-screen mode change the way in which we approach web development, if at all?

1. :not()
   

The negation, :not(), pseudo-class is my top choice. I think the true usefulness of :not() has yet to really be tapped. There is an element of logic this introduces into our selectors that we don’t think about much as developers. It reminds me quite a bit of the elegant and fascinating lobotomized owl selector which I adore for it’s elegance, simplicity, and power. Combining attribute selectors, child selectors or the adjacent sibling selector with the negation pseudo-class is a tantalizing prospect. Combining it in creative ways with the Cascade has similar intriguing possibilities.

The web is always changing and it can be difficult to keep up. It’s easy to hide your head in your work and plug along. While there are wonderful people out there highlighting all the exciting new features and ideas in our industry, it’s also necessary to look up and take notice of even the small things.

Sometimes, after digging around in the specs and documentation, you’ll find a jewel sitting there, waiting to solve a problem you didn’t know you had.

Back to Top