CSS Second Child

We will comprehend the CSS second child in this article. Let us understand what the second child is.

Second Child

The second child in CSS is the child related to the second number. Let us comprehend it with the assistance of a demonstration.

Demonstration

The code given below contains a "div" element that is a parent. The "div" element consists of many children. The "p" element written directly after the parent is considered the first child, and the next "p" element is considered the second child.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Demonstration of CSS second child</title>
</head>
<body>
    <div class="parent">
        <p> 1st Child </p>
        <p> 2nd Child </p>
        <p> 3rd Child </p>
        <p> 4th Child </p>
        <p> 5th Child </p>
        <p> 6th Child </p>
    </div>
</body>
</html>

Output:

Here is the output in which we can clearly witness the second child.

We can pick the second child of the parent with the help of :nth child() selector.

:nth Child() Selector

It is a pseudo-class selector used to match the nth-child element. It allows us to select any child of the parent and give any style to the element.

Syntax:

Name of the element:nth-child(n) {
    CSS declarations;
}

The name of the child element should be written at the start of the syntax. "n" is the number, odd keyword, even keyword, or formula.

Demonstrations of :nth-child() Selector

We will comprehend the :nth-child() with the help of demonstrations.

Demonstration 1:

In this demonstration, we will choose all the children one by one and apply style to them. We will create a list of 10 electronic appliances and select each item using nth-child() to give it different colors.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Selecting child</title>
    <style>
        li:nth-child(1) {
            color: red;
        }
        li:nth-child(2) {
            color: pink;
        }
        li:nth-child(3) {
            color: tomato;
        }
        li:nth-child(4) {
            color: green;
        }
        li:nth-child(5) {
            color: rebeccapurple;
        }
        li:nth-child(6) {
            color: firebrick;
        }
        li:nth-child(7) {
            color: violet;
        }
        li:nth-child(8) {
            color: teal;
        }
        li:nth-child(9) {
            color: lightblue;
        }
        li:nth-child(10) {
            color: hotpink;
        }
    </style>
</head>
<body>
    <h3>List of Electronic Appliances</h3>
    <ul>
        <li>Refrigerator</li>
        <li>Oven</li>
        <li>Hair dryer</li>
        <li>Hair straightener</li>
        <li>Washing machine</li>
        <li>Mixer</li>
        <li>Blender</li>
        <li>Electric stove</li>
        <li>Coffee machine</li>
        <li>Water heater</li>
    </ul>
</body>
</html>

Output:

Here is the result in which we can witness each item with different colors applied to them.

Demonstration 2:

In this demonstration, we are going to choose odd and even numbers of children and give them style utilizing nth-child().

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Selecting child using odd and even keywords</title>
    <style>
        body {
            font-size: 24px;
            font-family: 'Courier New', Courier, monospace;
            background-color: rgb(153, 143, 143);
        }
        li:nth-child(odd) {
            color: rgb(178, 243, 146);
        }
        li:nth-child(even) {
            color: rgb(181, 233, 245);
        }

    </style>
</head>
<body>
    <h3>List of Kitchen Items</h3>
    <ul>
        <li>Spoon</li>
        <li>Bowl</li>
        <li>Cutting Board</li>
        <li>Cooker</li>
        <li>Vegetable Peeler</li>
        <li>Grater</li>
        <li>Potato Masher</li>
        <li>Baking Sheet</li>
        <li>Can Opener</li>
        <li>Measuring Cups</li>
    </ul>
</body>
</html>

Output:

Here in the output we can witness that the odd number child is in light green and the even number child is in light blue.

Demonstration 3:

We are going to select every third child using the formula "3n + 1" and give style to them in this demonstration utilizing nth-child().

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Selecting child using formula</title>
    <style>
        body {
            font-size: 24px;
            font-family: 'Courier New', Courier, monospace;
            background-color: rgb(252, 180, 180);
        }
        li:nth-child(3n + 3) {
            color: rgb(194, 72, 11);
            background-color: yellow;
        }

    </style>
</head>
<body>
    <h3>List of Months</h3>
    <ul>
        <li>January</li>
        <li>February</li>
        <li>March</li>
        <li>April</li>
        <li>May</li>
        <li>June</li>
        <li>July</li>
        <li>August</li>
        <li>September</li>
        <li>October</li>
        <li>November</li>
        <li>December</li>
    </ul>
</body>
</html>

Output:

Here is the output in which we can witness that every 3^rd, 4^th, 5^th, and 6^th child is in red with a yellow background.

Demonstration to Apply Style on Second Child Using the nth-child()

We will use nth-child() to select the second child and apply style to it.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Selecting second child using nth-child()</title>
    <style>
        body {
            font-size: 30px;
            font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande';
            background-color: purple;
            color: white;
        }
        li:nth-child(2) {
            color: yellow;
        }

    </style>
</head>
<body>
    <h3>List of Private Banks in India</h3>
    <ul>
        <li>ICICI Bank</li>
        <li>Dhanlaxmi Bank</li>
        <li>Federal Bank</li>
        <li>Yes Bank</li>
        <li>Bank of Baroda</li>
    </ul>
</body>
</html>

Output:

Here, in the output, we can witness that the second child is given the style.

Browser Support

Following are the browsers that support the :nth-child() selector:

Google Chrome
Safari
Microsoft Edge
Firefox
Opera

Conclusion

We have understood the CSS second child in this article. Some points to remember are given below:

The child that comes in connection with the second number is called the second child.
The nth-child () selector is used to select the child.
We can select the child in three ways:
- Using number, i.e., nth-child(2)
- Using even and odd keywords, i.e., nth-child(even)
- Using the formula, i.e., nth-child(2n)

Next TopicCSS Spacing

← prev next →