CSS Select nth element with class
(nth-of-type with certain class aka nth-of-class)
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
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
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
Selecting the second element with the
And with jQuery:
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:
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