Pseudo-classes of the child group

With the help of these pseudo-classes, you can conveniently select elements by their ordinal number within the parent element.

Let's color the background of the list items in different colors. Note that all list items have the same classes, which means we cannot refer to separate items using a class selector.

        
          
          <ul class="list">  <li class="list-item">Purple</li>  <li class="list-item">Lime</li>  <li class="list-item">Azure</li>  <li class="list-item">Azure</li>  <li class="list-item">Azure</li>  <li class="list-item">Pink sherbet</li>  <li class="list-item">Moderate orange</li></ul>
          <ul class="list">
  <li class="list-item">Purple</li>
  <li class="list-item">Lime</li>
  <li class="list-item">Azure</li>
  <li class="list-item">Azure</li>
  <li class="list-item">Azure</li>
  <li class="list-item">Pink sherbet</li>
  <li class="list-item">Moderate orange</li>
</ul>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

All list items will have a blue background:

        
          
          .list-item {  background-color: #2E9AFF;}
          .list-item {
  background-color: #2E9AFF;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

The first list item (the first child element) will have purple:

        
          
          .list-item:first-child {  background-color: #C56FFF;}
          .list-item:first-child {
  background-color: #C56FFF;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

The last list item (the last child element) will have an orange background:

        
          
          .list-item:last-child {  background-color: #FF8630;}
          .list-item:last-child {
  background-color: #FF8630;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

The second list item will have a green background:

        
          
          .list-item:nth-child(2) {  background-color: #41E847;}
          .list-item:nth-child(2) {
  background-color: #41E847;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

The second to last list item will have a pink background:

        
          
          .list-item:nth-last-child(2) {  background-color: #F498AD;}
          .list-item:nth-last-child(2) {
  background-color: #F498AD;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

There are three super simple pseudo-classes from this set:

• :only-child — selects any element that is the only child of its parent. You can mimic similar behavior with these combinations: :first-child:last-child or :nth-child(1):nth-last-child(1), but why make it complicated when you can do it simpler?
• :first-child — selects the first child element in the parent.
• :last-child — selects the last child element in the parent.

Pseudo-classes bearing the combination of letters nth work much more interestingly. For them to work correctly, you need to specify in parentheses a pattern by which child elements will be selected.

Sounds more complicated than it works. Let's start simple with keyword phrases:

• :nth-child(odd) — selects odd elements within the parent that match the left side of the selector.
• :nth-child(even) — selects even elements within the parent that match the left side of the selector.

In parentheses, we can simply specify a number. Thus, the corresponding child element will be selected. For example, :nth-child(3) will select the third child element that matches the left side of the selector.

But things get much more interesting when we want to select, for example, every third element within the parent. We use the formula :nth-child(3n). Instead of n, 0, then 1, 2, and so on will be substituted. As a result of the multiplication in parentheses, the numbers 0, 3, 6, 9, and so on will be inserted until the child elements within the parent run out.

Let's go further and try to select every sixth element starting from the tenth. Here we need to add 10 to the multiplication by n, so that the count starts not from 0 but from 10: nth-child(6n+10).

The pseudo-class :nth-last-child works exactly the same way, but the counting starts from the end.

💡 Often, novice developers try to apply these pseudo-classes to the parent element. But here it is simply necessary to remember that pseudo-classes should be applied specifically to child elements, from which selections are to be made. When calculating the ordinal number of the child element, all sibling child elements at the same level as the element to which we are applying the :nth-child pseudo-class are taken into account, regardless of the class and type of element.

💡 Often it is not immediately possible to mentally construct the correct formula. Do not hesitate to use the NTH calculator.