How to Get a Specific Number of Child Elements With CSS

The :nth-child() pseudo-class selects only the elements that are nth child elements, regardless of type and parent.

You will need to follow this syntax:

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass) 

:nth-child(arg) {
  // CSS Property;
}

Here, "arg" is the argument representing the pattern for matching elements. It can be specified by a number, keyword, or formula.

Below, we’ll show examples with each of them. Let’s start!

Create HTML

<body>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
</body>

Add CSS

p:nth-child(3) {
  color: #fc0303;
  font-weight: bold;
  font-size: 20px;
}

Here is the full code.

Example of getting a specific number of child elements with a number:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:nth-child(3) {
        color: #fc0303;
        font-weight: bold;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <p>Example</p>
    <p>Example</p>
    <p>Example</p>
    <p>Example</p>
    <p>Example</p>
  </body>
</html>

Result

Example

Example

Example

Example

Example

In this example, we applied the syntax mentioned above to the <p> element and specified the :nth-child selector by a number.

Next, you can see examples where the :nth-child selector is specified by keywords: "even" and "odd".

The "even" keyword specifies elements the numeric position of which is even (e.g., 2, 4, 6, 8, etc.), and "odd" determines that the numeric position is "odd" (e.g., 1, 3, 5, 7, etc.).

Example of getting a specific number of child elements using "even":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:nth-child(even) {
        color: #fc0303;
        font-weight: bold;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <p>Example</p>
    <p>Example</p>
    <p>Example</p>
    <p>Example</p>
    <p>Example</p>
  </body>
</html>

Example of getting a specific number of child elements using "odd":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:nth-child(odd) {
        color: #fc0303;
        font-weight: bold;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <p>Example</p>
    <p>Example</p>
    <p>Example</p>
    <p>Example</p>
    <p>Example</p>
  </body>
</html>

In our last example, the :nth-child selector is specified by a formula. It specifies the elements the position of which matches A*n + B, for every positive integer n. The value of n starts from 0.

Example of getting a specific number of child elements using a formula:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:nth-child(3n + 2) {
        color: #fc0303;
        font-weight: bold;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <p>Example</p>
    <p>Example</p>
    <p>Example</p>
    <p>Example</p>
    <p>Example</p>
  </body>
</html>