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:

How to Get a Specific Number of Child Elements in CSS

: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

Place <p> elements inside a <body>.

How to Get a Specific Number of Child Elements in CSS

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

Add CSS

Set the :nth-child selector and add the argument.
Add style using the color, font-weight, and font-size properties.

How to Get a Specific Number of Child Elements in 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:

Example of getting a specific number of child elements using 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>

Try it Yourself »

Result

<div class="demo px-2.5 mt-1 mb-5 not-prose">Example

Example

</div>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":

How to Get a Specific Number of Child Elements in CSS

<!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>

Try it Yourself »

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

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>

Try it Yourself »

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>

Try it Yourself »