CSS :nth Tester

Create & test your CSS :nth recipes.

Quickly create & test your CSS :nth recipes using our :nth tester below — save time guessing, get it right the first time.

ex. 3n+2

Common Recipes

  • Select every third element starting at second if it's a list item
  • Select the third item if it's a list item
  • Select the the first four elements if they are list items
  • Select the second to last element if it is a list item
  • Select the first appearing div
  • Select the last appearing div
  • Select odd list items
  • Select every fifth list item starting at first
  • Select all but the first 3 list items

The CSS Code

li:nth-child(3n+2) {
  /* Your styles here */
}

The <div> and <ins> elements in the code tree on the right don't show their closing tags (for visual simplicity), but they are actually there!

Demo

CSS :nth Tester FAQs

Common :nth recipes & questions.

What is a CSS nth-child?

The :nth-child() is a CSS pseudo-class selector that allows you to select elements based on their index (source order) inside their container. You can pass in a positive number as an argument to :nth-child(), which will select the one element whose index inside its parent matches the argument of :nth-child().

Select every third element starting at second if it's a list item in CSS?

Use the following CSS :nth-child recipe to select every third element starting at second if it's a list item: li:nth-child(3n+2)

Select the third item if it's a list item in CSS?

Use the following CSS :nth-child recipe to select the third item if it's a list item: li:nth-child(3)

Select the the first four elements if they are list items in CSS?

Use the following CSS :nth-child recipe to select the the first four elements if they are list items: li:nth-child(-n+4)

Select the second to last element if it is a list item in CSS?

Use the following CSS :nth-child recipe to select the second to last element if it is a list item: li:nth-last-child(2)

Select the first appearing div in CSS?

Use the following CSS :nth-child recipe to select the first appearing div: div:nth-of-type(1)

Select the last appearing div in CSS?

Use the following CSS :nth-child recipe to select the last appearing div: div:nth-last-of-type(1)

Select odd list items in CSS?

Use the following CSS :nth-child recipe to select odd list items: li:nth-of-type(odd)

Select every fifth list item starting at first in CSS?

Use the following CSS :nth-child recipe to select every fifth list item starting at first: li:nth-of-type(5n+1)

Select all but the first 3 list items in CSS?

Use the following CSS :nth-child recipe to select all but the first 3 list items: li:nth-child(n+4)