The CSS quantity query with :nth-last-child()

Published at: Jul 27 2022
Updated at: Jan 05 2023
Reading time: 2min

Just parking this CSS snippet on my blog for my future self. 🙈

If you want to select elements only when there's a given number of them, you can use a :nth-last-child() selector combination.

The following selector combination is called a "quantity query".

li:nth-last-child(n+3),
li:nth-last-child(3) ~ li {
  color: red;
}

And it selects all list elements when there are at least three of them. See it in action below. 👇

HTML

<ul>
  <li>One 
  <li>Two
  <li>Three
  <!-- Remove one list item! -->
</ul><ul>
  <li>One 
  <li>Two
  <li>Three
  <!-- Remove one list item! -->
</ul>

CSS

body {
 color: #eee;
}

/* 
 If there are at least 
 three list items,
 style them
*/
li:nth-last-child(n+3),
li:nth-last-child(3) ~ li {
 background: #de1243;
 padding: 0.5em;
}
body {
 color: #eee;
}

/* 
 If there are at least 
 three list items,
 style them
*/
li:nth-last-child(n+3),
li:nth-last-child(3) ~ li {
 background: #de1243;
 padding: 0.5em;
}

Preview

The CSS selector is hard to read but works. 🫣

Update: `:has()` enables easier-to-read quantity queries

The quantity query above is based on some selector trickery and definitely hard to remember. Luckily, the new :has() pseudo-class is on its way to cross-browser support to simplify such monstrosities!

Browser support info for `:has()`

105	105	105	121	121	15.4	15.4	20.0	105

With :has() the quantity query becomes a resonable one-liner that reads as "Select all li elements in a list that includes a third last child counting from the end."

HTML

<ul>
  <li>One 
  <li>Two
  <li>Three
  <!-- Remove one list item! -->
</ul><ul>
  <li>One 
  <li>Two
  <li>Three
  <!-- Remove one list item! -->
</ul>

CSS

body {
 color: #eee;
}

/* 
 If there are at least three 
 list items, style them!
*/
ul:has(li:nth-last-child(3)) li {
 background: #de1243;
 padding: 0.5em;
}
body {
 color: #eee;
}

/* 
 If there are at least three 
 list items, style them!
*/
ul:has(li:nth-last-child(3)) li {
 background: #de1243;
 padding: 0.5em;
}

Preview

Boom! And that's all it takes to select elements from a list with at least three items. 🎉

And even exact matches are possible by selecting "all list elements in a list including a list element which is the third and last child."

HTML

<ul>
  <li>One 
  <li>Two
  <li>Three
  <!-- Remove one list item! -->
</ul><ul>
  <li>One 
  <li>Two
  <li>Three
  <!-- Remove one list item! -->
</ul>

CSS

body {
 color: #eee;
}

/* 
 If there are three list items,
 style them!
*/
ul:has(>li:nth-child(3):last-child) li {
 background: #de1243;
 padding: 0.5em;
}
body {
 color: #eee;
}

/* 
 If there are three list items,
 style them!
*/
ul:has(>li:nth-child(3):last-child) li {
 background: #de1243;
 padding: 0.5em;
}

Preview

:has() is a gift that keeps giving!

If you enjoyed this article...

Join 5.5k readers and learn something new every week with Web Weekly.

Reply to this post and share your thoughts via good old email.

Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

The CSS quantity query with :nth-last-child()

Update: `:has()` enables easier-to-read quantity queries

About Stefan Judis

Related Topics

Related Articles

The CSS quantity query with :nth-last-child()

Update: :has() enables easier-to-read quantity queries

About Stefan Judis

Related Topics

Related Articles

Update: `:has()` enables easier-to-read quantity queries