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 8 days ago.

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

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

Related Topics

Related Articles

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

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

Related Topics

Related Articles

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