:nth-child

The :nth-child selector allows you to select one or more elements based on their source order, according to a formula. It is defined in the CSS Selectors Level 3 spec as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling elements.

Suppose we are building a CSS grid, and want to remove the margin on every fourth grid module:

<section class="grid">
  <article class="module">One</article>
  <article class="module">Two</article>
  <article class="module">Three</article>
  <article class="module">Four</article>
  <article class="module">Five</article>
</section>

Rather than adding a class to every fourth item (e.g. .last), we can use :nth-child:

.module:nth-child(4n) {
  margin-right: 0;
}

As you can see, :nth-child takes an argument: this can be a single integer, the keywords “even” or “odd”, or a formula. If an integer is specified only one element is selected—but the keywords or a formula will iterate through all the children of the parent element and select matching elements — similar to navigating items in a JavaScript array. Keywords “even” and “odd” are straightforward (2, 4, 6 etc or 1, 3, 5 respectively). The formula is constructed using the syntax an+b, where:

  • “a” is an integer value
  • “n” is the literal letter “n”
  • “+” is an operator and may be either “+” or “-”
  • “b” is an integer and is required if an operator is included in the formula

It is important to note that this formula is an equation, and iterates through each sibling element, determining which will be selected. The “n” 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, which worked because every time an element was checked, “n” increased by one (4×0, 4×1, 4×2, 4×3, etc). If an element’s 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.

To illustrate further, here are some examples of valid :nth-child selectors:

Check out this Pen!

Luckily, you don't always have to do the math yourself—there are several :nth-child testers and generators out there:

Points of Interest

  • :nth-child iterates through elements starting from the top of the source order. The only difference between it and :nth-last-child is that the latter iterates through elements starting from the bottom of the source order.
  • The syntax for selecting the first n number of elements is a bit counter-intuitive. You start with -n, plus the positive number of elements you want to select. For example, li:nth-child(-n+3) will select the first 3 li elements.
  • The :nth-child selector is very similar to :nth-of-type but with one critical difference: it is less specific. In our example above they would produce the same result because we are iterating over only .module elements, but if we were iterating over a more complex group of siblings, :nth-child would try to match all siblings, not only siblings of the same element type. This reveals the power of :nth-child—it can select any sibling element in an arrangement, not only elements that are specified before the colon.

Other Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Any 3.2+ Any 9.5+ 9+ Any Any

:nth-child was introduced in CSS Selectors Module 3, which means old versions of browsers do not support it. However, modern browser support is impeccable, and the new pseudo-selectors are widely used in production environments. If you require older browser support, either polyfill for IE, or use these selectors in non-critical ways á la progressive enhancement, which is recommended.

Comments

  1. User Avatar
    Sam
    Permalink to comment#

    So I have an accordion setup for my FAQ section. Inside one of the ‘accordions’ I have a form with an ul. The ul has 5 li.

    What I want is to make a submit button appear when the checkbox in each li has been checked.

    Is the :nth-child what I want to use for this or is there something else.

    Thank you for any help you can give.

  2. User Avatar
    Eza Dwi Anandharizky

    it works thanks :)

  3. User Avatar
    Jacob
    Permalink to comment#

    Nice. Thank you for the clear write-up :-)

  4. User Avatar
    Marc Smitham
    Permalink to comment#

    Thank you for the concise explanation of the nth-child pseudo-class. Very helpful- it clears up a lot about this powerful selector. I’m comfortable enough with it now to start using it.

    • User Avatar
      Kesavan
      Permalink to comment#

      Hi Experts,

      I am trying to write a piece of CSS code to format the table in SAP Design Studio tool. In one of the table i have a CSS to hover the specific column of the table based on the n-th child selector. Below is the snippet.

      .Table1 .sapzencrosstab-RowHeaderArea:hover tr > td:nth-child(4)
      {
      text-decoration: underline !important;
      cursor: pointer !important;
      }

      Is it possible to mention the name of the column header here instead of fixing it as the 4th column. The requirement is to hover the column name called, say ‘Region’, instead of saying it as 4th column because Region dimension can change its position in the table when the user drills down few other dimensions into the table.

      I have searched in forum to find out the css classes and possible workarounds, but could not find any.

      Thanks & Regards,
      Kesavan.

  5. User Avatar
    Rohith
    Permalink to comment#

    Hi,

    The Phrase ” But the keywords or a formula will iterate through all the children of the parent element and select matching elements ”

    is this also right as per my understanding -> ” But the keywords or formula goes down to every child element of the parent and select matching elements”

    instead of using iterate through can it also be explained like above, is that also right according to my understanding?

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag