This selector is employed to select elements based on their position within a parent element, irrespective of the parent's type. The "n" can take the form of a keyword, mathematical formula, or numerical value. It is utilized to target elements based on their sequential order among a set of sibling elements. This selector identifies each element as the nth-child.
Syntax
Following are the syntax of this selector:
:nth-child(n) {
//CSS Property
}
The "n" enclosed in the parentheses serves as the parameter that defines the pattern for identifying elements. It has the flexibility to take on various forms, such as functional notation, even numbers, or odd numbers.
Odd numbers symbolize the elements located at odd positions in a sequence, such as 1, 3, 5, and so on. Likewise, the even numbers denote the elements positioned at even spots in the sequence, like 2, 4, 6, and so forth.
Functional notation (An+B) is a representation of elements that follow a pattern where the position of siblings matches the An+B formula. Here, A represents the integer step size, n is a positive integer starting from 0, and B is the integer offset.
Let' see some illustrations.
Example1
In this instance, we will be employing the functional expression 3n+4 to symbolize the components:
(3×0)+4 = 4, (3×1)+4 =7, and many more.
<!DOCTYPE html>
<html>
<head>
<title>CSS :nth-child Selector</title>
<style>
p:nth-child(3n+4) {
background: yellow;
color: black;
font-size:30px;
}
</style>
</head>
<body style = "text-align:center">
<h1>
Hello World
</h1>
<h2>
Welcome to the C# Tutorial
</h2>
<p>It will not affected.</p>
<p>It will be affected.</p>
<p>Not affected.</p>
<p>Not affected.</p>
<p>It will be affected.</p>
</body>
</html>
Example2
In this instance, we will utilize odd and even terms to correspond with elements based on whether their index is odd or even. It is important to remember that the index of the first child is 1.
<!DOCTYPE html>
<html>
<head>
<title>CSS :nth-child Selector</title>
<style>
p:nth-child(even) {
background: yellow;
color: black;
font-size:30px;
}
p:nth-child(odd) {
background: blue;
color: white;
font-size:20px;
</style>
</head>
<body style = "text-align:center">
<h1>
Hello World
</h1>
<h2>
Welcome to the C# Tutorial
</h2>
<p>Odd</p>
<p>Even</p>
<p>Odd</p>
<p>Even</p>
<p>Odd</p>
</body>
</html>