A :nth-child(An+B [of S]?) polyfill thanks to CSS :has() and :not()

~

# The code

If you’re just here for the code, here it is. You can see the code in action in the demo below. Use the selector generator below to generate your own selectors.

/* :nth-child(1 of .special) */
.special:not(.special ~ .special) {
    …
}

/* :nth-child(2 of .special) */
.special ~ .special:not(.special ~ .special ~ .special) {
    …
}

/* :nth-child(3 of .special) */
.special ~ .special ~ .special:not(.special ~ .special ~ .special ~ .special) {
    …
}

…

/* :nth-last-child(1 of .special) */
.special:not(:has(~ .special)) {
    …
}

/* :nth-last-child(2 of .special) */
.special:not(:has(~ .special ~ .special)):not(.special:not(:has(~ .special))) {
    …
}

/* :nth-last-child(3 of .special) */
.special:not(:has(~ .special ~ .special ~ .special)):not(.special:not(:has(~ .special ~ .special))) {
    …
}

If you want to know how these work keep on reading 🙂

~

# :nth-child(An+B [of S]?)?

CSS Selectors level 3 introduced the :nth-child() pseudo-class selector

The :nth-child(an+b) pseudo-class notation represents an element that has an+b-1 siblings before it in the document tree, for any positive integer or zero value of n. For values of a and b greater than zero, this effectively divides the element’s children into groups of a elements (the last group taking the remainder), and selecting the bth element of each group.

This selector is mostly used to select the odd or even elements from a group of siblings, or to alternate the style of groups of elements.

tr:nth-child(2n+1) /* represents every odd row of an HTML table */
tr:nth-child(odd)  /* same */
tr:nth-child(2n+0) /* represents every even row of an HTML table */
tr:nth-child(even) /* same */

/* Alternate paragraph colours in CSS */
p:nth-child(4n+1) { color: navy; }
p:nth-child(4n+2) { color: green; }
p:nth-child(4n+3) { color: maroon; }
p:nth-child(4n+4) { color: purple; }

In CSS Selectors level 4, this selector got extended with an optional of S part.

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, which is a <complex-real-selector-list>. If S is omitted, it defaults to *|*.

By passing a selector argument, you can select the Nth element that matches that selector. For example, you can select “the 2nd item with the class .bar” like so:

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

The selector basically first does a pre-selection of the children that match the given selector list, and only applies the An+B logic onto that subset of siblings. I have detailed this approach before in the CSS :nth-of-class selector.

~

# The selectors

While playing around with the code to select the nth element from an “island of elements” by leveraging CSS :has() I noticed :has() can also be used to polyfill :nth-child(An+B [of S]?) and :nth-last-child(An+B [of S]?). We do this by using the general sibling combinator ~ instead of the adjacent sibling combinator +

~

:nth-child(B of S)

The selector below will polyfill :nth-child(2 of .special):

.special ~ .special:not(.special ~ .special ~ .special) {
    …
}

It works by:

• Selecting all .specials that are preceded by 1 .special using .special ~ .special, effectively selecting the 2nd, 3rd, 4th, … .special sibling.
• Limiting that selection to exclude any .special that is preceded by 2 .specials, omitting the 3rd, 4th, … .special siblings from the initial selection.

By adding more ~ .special parts to the selectors, the 3rd, 4th, 5th, … .special sibling can be selected. See the selector generator below to create these.

~

:nth-last-child(B of S)

The selector below will polyfill :nth-last-child(3 of .special):

.special:not(:has(~ .special ~ .special ~ .special)):not(.special:not(:has(~ .special ~ .special))) {
    …
}

It works by:

• Selecting the last 3 .specials using .special:not(:has(~ .special ~ .special ~ .special))
• Selecting all but the last 2 .specials using .special:not(.special:not(:has(~ .special ~ .special)))
• Taking the intersection from both selections.

By adding more ~ .special parts to the selectors, other siblings can be selected. See the selector generator below to create these.

~

# Demo

See the Pen Creating new Selectors with :has(): A :nth-child(n of S) polyfill by Bramus (@bramus) on CodePen.

~

# Selector Generator

The created selectors can be automatically generated, as it’s a matter of adding extra ~ .special parts to the selectors to move the needle. Use the dropdowns+input in the pen below to generate the selector you want.

See the Pen
Creating new Selectors with :has(): A :nth-child(n of S) polyfill by Bramus (@bramus)
on CodePen.

~

# Browser Support

These selectors are supported by all browsers that have :has() support. At the time of writing this does not include Firefox.

~

# Spread the word

To help spread the contents of this post, feel free to retweet its announcement tweet:

A `:nth-child(An+B [of S]?)` polyfill thanks to CSS `:has()`

🔗 https://t.co/11Vb0pgNNJ

🏷 #css #polyfill #selectors pic.twitter.com/LcS6NLbKdo

— Bram.us (@bramusblog) December 14, 2022

~