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

This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis

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 :nth-last-child() combination.

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

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

See it in action below. 👇

[Interactive component: visit the article to see it...]

Reply to Stefan

This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis

Print Share Comment Cite Upload Translate Updates

APA

Stefan Judis | Sciencx (2022-07-26T22:00:00+00:00) The CSS quantity query with :nth-last-child() (#snippet). Retrieved from https://www.scien.cx/2022/07/26/the-css-quantity-query-with-nth-last-child-snippet/

MLA

" » The CSS quantity query with :nth-last-child() (#snippet)." Stefan Judis | Sciencx - Tuesday July 26, 2022, https://www.scien.cx/2022/07/26/the-css-quantity-query-with-nth-last-child-snippet/

HARVARD

Stefan Judis | Sciencx Tuesday July 26, 2022 » The CSS quantity query with :nth-last-child() (#snippet)., viewed ,<https://www.scien.cx/2022/07/26/the-css-quantity-query-with-nth-last-child-snippet/>

VANCOUVER

Stefan Judis | Sciencx - » The CSS quantity query with :nth-last-child() (#snippet). [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/07/26/the-css-quantity-query-with-nth-last-child-snippet/

CHICAGO

" » The CSS quantity query with :nth-last-child() (#snippet)." Stefan Judis | Sciencx - Accessed . https://www.scien.cx/2022/07/26/the-css-quantity-query-with-nth-last-child-snippet/

IEEE

" » The CSS quantity query with :nth-last-child() (#snippet)." Stefan Judis | Sciencx [Online]. Available: https://www.scien.cx/2022/07/26/the-css-quantity-query-with-nth-last-child-snippet/. [Accessed: ]

rf:citation

» The CSS quantity query with :nth-last-child() (#snippet) | Stefan Judis | Sciencx | https://www.scien.cx/2022/07/26/the-css-quantity-query-with-nth-last-child-snippet/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts