One thing that bothers me with CSS :nth-of-type/:nth-child selectors is that you can’t combine them with CSS classes. The selector below for example won’t work as you’d first expect it to work: it won’t color the second .bar element red

.bar:nth-child(2) {
  color: red;
}

What this selector will target though is an element that is both .bar and :nth-child(2):

See the Pen .class:nth-of-type by Bramus (@bramus) on CodePen.

🐛 This article first falsely assumed that the browser would somehow know that .bar happens to be an article element. That’s incorrect and this post has been adjusted. Thanks to @simevidas for pointing this out.

~

To solve my problem, I’d be needing something like a :nth-of-class selector. Unfortunately no such selector exists nor is it currently proposed. What is proposed though, in the upcoming CSS Level 4 Selectors specification (aka “not CSS4” 😜), is an extension to the nth-child/nth-last-child pseudo selectors: the ability add an extra "of S" part into those selectors.

The :nth-child(An+B [of S]?) pseudo-class notation represents elements that are among An+Bth elements from the list composed of their inclusive siblings that match the selector list S. If S is omitted, it defaults to *|*.

Given that, our “:nth-of-class”-like selector becomes a reality:

article:nth-child(2 of .bar) {
  color: red;
}

Here’s a pen with the result:

See the Pen .class:nth-of-type by Bramus (@bramus) on CodePen.

If you’re using Firefox or Chrome you’ll see that the demo above is broken, as browser support for it is bad. Only Safari supports it at the time of writing. Other browser have meta-issues to implement CSS Level 4 selectors:

👋 Please vote on those bugs mentioned above if you want those features to land in the browsers. By voting on bugs you can tell a browser vendor that you’d like to see a certain feature land. Eventually, the support table below will color green over time:

💡 Shown above is a dynamic CanIUse.com image, showing an always up-to-date support table.

~

Did this help you out? Like what you see?
Consider donating.

I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!

☕️ Buy me a Coffee ($3)





Source link

Write A Comment