CSS: nth-selector
CSS nth selector can be used to match an element according to its position regardless of its parent’s type. Here, n can be any number, formula, or a keyword.
These selectors are applied to match an element according to its position inside a sibling’s group. It also matches all the elements, which are the nth-child.
Syntax:
:nth-child(n)
{
//CSS Property
}
The “n” in the above syntax, is an argument which is specified in the parentheses. It represents a pattern to match the elements. It may be odd, even, or functional notation.
Odd values depict various components that are located in an odd series like 1, 3, and 5, whereas even values depict multiple components that are locates in an even series like 2, 4, and 6.
Functional notation (An+B)- It depicts those components whose position of siblings match to the pattern An+B, Where:
A: It is the size of integer step.
n: It is a positive integer, i.e., begins from 0.
B: It is an integer offset.
Let’s consider some of the essential illustrations as follows:
Example 1:
In the following example, we use 3n+4 functional notations that will depict the elements:
(3×0)+4 = 4, (3×1)+4 =7, and many others.
<!DOCTYPE html>
<html>
<head>
<title> :nth-child Selector </title>
<style>
p:nth-child(3n+4)
{
background: lime;
color: black;
font-size: 30px;
}
</style>
</head>
<body style= "text-align: center">
<h1> Hello World </h1>
<h2> Welcome to this Page </h2>
<p> It will not influenced. </p>
<p> It will be influenced. </p>
<p> It will not influenced. </p>
<p> It will not influenced. </p>
<p> It will be influenced. </p>
</body>
</html>
Output:
Example 2:
In the following example, we use even and odd keywords that are matching with those components whose index is even or odd. It is noticed that any first child’s index is 1.
<!DOCTYPE html>
<html>
<head>
<title> :nth-child Selector </title>
<style>
p:nth-child(even)
{
background: lime;
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 this Page </h2>
<p> Odd </p>
<p> Even </p>
<p> Odd </p>
<p> Even </p>
<p> Odd </p>
</body>
</html>
Output:
