:nth-child Between Two Fixed Indexes

Celý článek

I needed to select some elements between two fixed indexes the other day — like literally the second through fifth elements. Ironically, I have a whole post on “Useful :nth-child Recipes” but this wasn’t one of them.

The answer, it turns out, isn’t that complicated. But it did twist my brain a little bit.

Say you want to select all divs from the second one and beyond:

div:nth-child(n + 2) {

}
/* [ ]  [x]  [x]  [x]  [x]  [x]  [x]  [x], etc. */

That makes logical sense to me. If n is 0, the expression is 2, and n increments upwards from there and selects everything beyond it.

But then how do you “stop” the selecting at a specific index? Like…

/* Not real */
div:nth-child(minmax(2, 5)) {

}
/* [ ]  [x]  [x]  [x]  [x]  [x]  [ ]  [ ], etc. */

Well, we can do the opposite thing, selecting only the first set of elements then stopping (constraining in the other direction) by reversing the value of n.

div:nth-child(-n + 6) {

}
/* [x]  [x]  [x]  [x]  [x]  [ ]  [ ]  [ ], etc. */

That will select the the first five elements and then stop because, as n gets bigger, the expression value goes to 0 and into negative numbers.

So, the CSS trick here is to combine both of those :nth-child expressions.

We know that CSS pseudo-selectors are additive in the sense that they must both be true in order to select them.

a:first-child:hover {
  /* selects the <a> if it is BOTH the first child and in a hover state */
}

To accomplish the idea of “2 and over” and “5 and under” we chain the pseudo-selectors:

div:nth-child(n + 2):nth-child(-n + 6) {
  background: green;
}

That’ll do:

The part that twisted my brain was thinking about “additive” pseudo-selectors. I was thinking that selecting “2 and up” would do just that, and “5 and under” would do just that, and those things combined meant “all elements.” But that’s just wrong thinking. It’s the conditions that are additive, meaning that every element must meet both conditions.

If you found this confusing like I did, wait until you check out Quanity Queries. By nesting a lot of nth-style pseudo-selectors, you can build logic that, for example, only selects elements depending on how many of them are in the DOM.

div:nth-last-child(n+2):nth-last-child(-n+5):first-child, 
div:nth-last-child(n+2):nth-last-child(-n+5):first-child ~ div {
  /* Only select if there are at least 2 and at most 5 */
}

Una broke this down even further for us a while back.

The post :nth-child Between Two Fixed Indexes appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.