6 Unpopular But Helpful Pseudo Classes

After doing some research on vendor prefixes for a certain pseudo class, I discovered some classes I haven’t used before. I continued to read through the articles while checking canIuse multiple times and decided to make a post about the ones I feel have the most value.

Now some of these I have never seen or used before, mainly because the browser support for them is limited. However, as more and more elements are added to browsers each update, it is good to be aware of them now.

1. :only-child
2. :any
3. :in-range
4. :out-of-range
5. :not
6. :empty

:only-child

First up is the :only-child class. This class represents any element which is the only child of its parent (mind blown right!?). I find this one useful when dealing with apps that load data from a database. For example, when creating a todo list, maybe you want to emphasis you only have one todo left with a bolder color. Or when selling a product and there is only one left in stock. This last item can be styled to show the urgency to purchase quickly.

See Result Tab

This one has been around for awhile and is fully supported by all browsers.

:any

Next up is the :any class. This one was new to me. If you work with CSS modules, then this class is not very helpful. However if you work on long stylesheet(s) that style the entire page, then this can be handy.

The :any class is allows you to easily target nested elements specificity. For example:

See Result Tab

You might be thinking that this doesn't save you much time, however this is just for first level specificity. You can add multiple arguments like this:

:-webkit-any(section, article, aside, nav) :-webkit-any(section, article, aside, nav) h1 {
  font-size: 20px;
}

Instead of writing it all out like this:

section section h1, section article h1, section aside h1, section nav h1,
article section h1, article article h1, article aside h1, article nav h1,
aside section h1, aside article h1, aside aside h1, aside nav h1,
nav section h1, nav article h1, nav aside h1, nav nav h1, {
  font-size: 20px;
}

Now no one should be writing CSS like this, however if your app’s classes/Ids change frequently, this can be helpful. Here is the browser support for the :any class.

:in-range & :out-of-range

Up next are the :in-range and the :out-of-range classes. I find these helpful when dealing with inputs that have mins and max ranges. If your app has a form that gathers information for a purchase, setting properties for certain levels can emphasis new rules.

See Result Tab

Here are the browser supports for :in-range and :out-of-range

:not

The :not class is probably my favorite new little gem. I have seen it in other applications but have not stopped to look it up. The :not class works similar to a JavaScript Boolean test. It matches to a selector that does not pass the argument test.

See Result Tab

The :not class has been around for awhile and has great browser support across the board. There is experimental code in progress to allow the :not to take multiple arguments:

p:not(.classy):not(.poor)

However this does not have any support in browser as of today

:empty

Finally we come to #6 the :empty class. The name should be self explanatory, as it targets elements that do not have any children. I see this useful again when there is a form that users need to fill out. As they work through the form, if any section does not have input of options inserted, styles can be applied to emphasis the need for more info. Rather than using JavaScript to constantly check the form inputs.

See Result Tab

This class has also been around for awhile and has great browser support.

Hope this post adds new tricks to your stack!