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. 👇

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

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	103*	103	15.4	15.4	20.0	105

* Please check MDN for more details.

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."

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

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."

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

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!

Was this snippet helpful?
Yes? Cool! You might want to check out Web Weekly for more snippets. The last edition went out 12 days ago.

About the author

Stefan standing in the park in front of a green background

Frontend nerd with over ten years of experience, "Today I Learned" blogger, conference speaker, Tiny helpers maintainer, and DevRel at Checkly.

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

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

Related Topics

Related Articles

About the author

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

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

Related Topics

Related Articles

About the author

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