{"id":14230,"date":"2011-09-06T20:19:49","date_gmt":"2011-09-07T03:19:49","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14230"},"modified":"2020-09-10T07:49:23","modified_gmt":"2020-09-10T14:49:23","slug":"nth-child","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/selectors\/n\/nth-child\/","title":{"rendered":":nth-child"},"content":{"rendered":"\n

The :nth-child<\/code> selector allows you to select one or more elements based on their source order, according to a formula. <\/p>\n\n\n\n

\/* Select the first list item *\/\nli:nth-child(1) { }\n\n\/* Select the 5th list item *\/\nli:nth-child(5) { }\n\n\/* Select every other list item starting with first *\/\nli:nth-child(odd) { }\n\n\/* Select every 3rd list item starting with first *\/\nli:nth-child(3n - 2) { }\n\n\/* Select every 3rd list item starting with 2nd *\/\nli:nth-child(3n - 1) { }\n\n\/* Select every 3rd child item, as long as it has class \"el\" *\/\n.el:nth-child(3n) { }<\/code><\/pre>\n\n\n\n
It is defined in the CSS Selectors Level 3 spec<\/a> as a \u201cstructural pseudo-class\u201d, meaning it is used to style content based on its relationship with parent and sibling elements.<\/p>\n\n\n\n
Suppose we are building a CSS grid, and want to remove the margin on every fourth grid module. Here’s that HTML:<\/p>\n\n\n\n
<section class=\"grid\">\n  <article class=\"module\">One<\/article>\n  <article class=\"module\">Two<\/article>\n  <article class=\"module\">Three<\/article>\n  <article class=\"module\">Four<\/article>\n  <article class=\"module\">Five<\/article>\n<\/section><\/code><\/pre>\n\n\n\n
Rather than adding a class to every fourth item (e.g. .last<\/code>), we can use :nth-child<\/code>:<\/p>\n\n\n\n
.module:nth-child(4n) {\n  margin-right: 0;\n}<\/code><\/pre>\n\n\n\n
The :nth-child<\/code> selector takes an argument: this can be a single integer, the keywords even<\/code>, odd<\/code>, or a formula. If an integer is specified only one element is selected\u2014but the keywords or a formula will iterate through all the children of the parent element and select matching elements \u2014 similar to navigating items in a JavaScript array. Keywords \u201ceven\u201d and \u201codd\u201d are straightforward (2, 4, 6, etc. or 1, 3, 5 respectively). The formula is constructed using the syntax an+b<\/code>, where:<\/p>\n\n\n\n
  • \u201ca\u201d is an integer value<\/li>
  • \u201cn\u201d is the literal letter \u201cn\u201d<\/li>
  • \u201c+\u201d is an operator and may be either \u201c+\u201d or \u201c-\u201d<\/li>
  • \u201cb\u201d is an integer and is required if an operator is included in the formula<\/li><\/ul>\n\n\n\n
    It is important to note that this formula is an equation, and iterates through each sibling element, determining which will be selected. The \u201cn\u201d part of the formula, if included, represents a set of increasing positive integers (just like iterating through an array). In our above example, we selected every fourth element with the formula 4n<\/code>, which worked because every time an element was checked, \u201cn\u201d increased by one (4\u00d70, 4\u00d71, 4\u00d72, 4\u00d73, etc). If an element\u2019s order matches the result of the equation, it gets selected (4, 8, 12, etc). For a more in-depth explanation of the math involved, please read this article<\/a>.<\/p>\n\n\n\n
    To illustrate further, here are some examples of valid :nth-child<\/code> selectors:<\/p>\n\n\n\n