The :nth-child() selector in CSS is used to match the elements based on their position in a group of siblings. It matches every element that is the nth-child. The: even and: odd pseudo-class is used with the list of items such as paragraph, article items which is basically a list content.
Odd Pseudo Class
The use of odd pseudo-class in any list item that will affect only the odd index number list.
Syntax:
li:nth-child( odd ) {
// CSS Property
}
Example:
<!DOCTYPE html>
<html>
<head>
<title>
CSS :nth-child(odd) Selector
</title>
<style>
li:nth-child(odd) {
background: green;
font-size: 24px;
color:white;
}
</style>
</head>
<body>
<li>Artificial Intelligence</li>
<li>Machine Learning</li>
<li>Blockchain</li>
</body>
</html>
Even Pseudo Class
The use of even pseudo-class in any list item that will effect only the even index number list.
Syntax:
li:nth-child( even ) {
// CSS Property
}
Example:
<!DOCTYPE html>
<html>
<head>
<title>
CSS :nth-child(even) Selector
</title>
<style>
li:nth-child(even) {
background: green;
font-size: 24px;
color:white;
}
</style>
</head>
<body>
<li>Artificial Intelligence</li>
<li>Machine Learning</li>
<li>Blockchain</li>
</body>
</html>