We will comprehend the CSS second child in this article. Let us understand what the second child is.
Second Child
The CSS pseudo-class :nth-child(2) targets the second element within a parent container based on its position. To better understand this concept, let's explore it through an example.
Demonstration
The code snippet provided below includes a "div" element serving as the container. Within this "div" element, there are multiple child elements. The initial "p" element following the parent is recognized as the primary child, while the subsequent "p" element is acknowledged as the secondary 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 result where the second offspring is clearly visible.
We have the ability to select the second child of a parent element by utilizing the :nth-child selector.
:nth Child Selector
It is a pseudo-class selector that is employed to target and style a specific nth-child element within its parent. This selector enables us to customize the appearance of any child element within the parent container.
Syntax:
Name of the element:nth-child(n) {
CSS declarations;
}
The child element's name must be specified at the beginning of the syntax. "n" can represent a number, an odd keyword, an even keyword, or a formula.
Demonstrations of :nth-child Selector
We will understand the :nth-child pseudo-class through demonstrations.
Demonstration 1:
In this example, we will systematically select and style each child element. We'll compile a roster of 10 electronic devices and apply distinct colors to each item by utilizing the nth-child selector.
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 outcome where each item is displayed with distinct colors assigned to each.
Demonstration 2:
In this example, we will select alternating groups of kids based on whether they are odd or even, and apply styling using the nth-child selector.
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 displayed output, we can observe that the child elements with odd numbers are highlighted in a shade of light green, while those with even numbers are highlighted in a shade of light blue.
Demonstration 3:
We will be targeting every third child element by applying the formula "3n + 1" and styling them using the nth-child pseudo-class in this example.
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 result where every third, fourth, fifth, and sixth child is highlighted in red with a yellow background.
Demonstration to Apply Style on Second Child Using the nth-child
We'll utilize nth-child to target the second child element and add styles 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 result, we can observe that the style is applied to the second child.
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)
- 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)