(nth-of-type with certain class aka nth-of-class)

Mate Marschalko
Nov 17, 2016 · 4 min read

I recently ran into a situation where I wanted to select the nth element in a list with a specific class name. Naturally, I set out researching a suitable CSS trick.

Unfortunately, this feature doesn’t exist in CSS as of today.

In CSS3 we have the nth-of-type selector which selects certain HTML elements.

When using the nth-of-type selector:

with this markup:

It selects the third <p> element within the section. This happens because CSS selects the <p> element that is the third appearance of the paragraph type within its parent and it skips other elements when counting.


Nth Element With a Certain Class

What I really wanted to do was select the nth appearance of an element with a certain class inside a common parent.

Take this markup for example:

Imagine you want to select the second list item that has the .active class. As I mentioned it earlier, this is currently not possible with CSS only.

It would be possible if the below selector worked:

In this selector, we used the general sibling selector (~). In case of A ~ B, it means to select a B element that comes after A in the HTML markup inside the same parent. The only difference between this and the adjacent sibling selector (+) is that in case of A + B, B has to come immediately after A.

Keeping this in mind, we can see that our proposed selector first selects an element with an .active class that comes after another .active element. This essentially means the second .active element. But the problem with this alone is that it would select all .active elements from the second appearance onwards. That’s why we exclude the .active elements coming after the second appearance using the :not pseudo-class.

The reason why this doesn’t work is because the :not pseudo class can’t handle combinators. You can only pass a single element, class, or id.

So if you really want to achieve this then you have two options:

  • Add a new class for the element you want to specifically select
  • Select that second appearance of the .active element using javascript

JavaScript Solution

If you decide to use JavaScript, you can use the following code.

Selecting the second element with the active class:

And with jQuery:


CSS4 nth-last-match

In the future, CSS4 introduces this functionality with the :nth-match and the :nth-last-match selectors. With CSS4 you can simply say:


Scenarios CSS Can Handle

When it comes to selecting elements with a specific class or ID there are certain scenarios where you can use simple CSS. We are going to discuss two of these.

1. Select ALL appearances of an element with a certain class from the nth appearance. For example, if we pick the second appearance, this means all elements with that class will be selected, but only from the second appearance onwards.

The above scenario translated to CSS is:

This selector could very easily grow into something long and ugly, imagine you want to select all from the 12th instance. For situations like that it’s worth creating a SASS function:

2. Add incremented styling to each element with a certain class. Say you have a list of elements and some of these have an .active class. Now, imagine you want to fade them in one-by-one with CSS animations and add a 0.5s animation delay on the first .active element, 1s for the second, 1.5s for the third, etc. This scenario is actually the very reason I was looking for this selector and why I started researching this topic.

The CSS style that would accomplish this is:

Again, it is quite laborious to write all this, so to save some time and clean the code here’s a SASS mixin to deal with that:


Conclusion

CSS selectors and SASS are quite powerful so there’s a LOT we can do without JavaScript. That’s why I like to first exploit the possibilities in CSS and only reach for a JavaScript solution after that.

The same time in some situations it’s just easier to pick elements with JS and toggle classes on and off on them. If you have five .active elements in your app and you want to select the second for some reason then it’s very likely this element is unique in some ways which should be represented with a unique semantic class.CSS Select nth element with class

Better Programming

Advice for programmers.

Mate Marschalko

Written by

Founder of http://www.webondevices.com Front-end Web Developer, Creative Technologist and Maker. Builds Internet connected devices for the IoT.

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade