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: 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
}
HTML
<!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>GeeksforGeeks</li>
<li>A Computer Science portal</li>
<li>Welcome to GeeksforGeeks</li>
</body>
</html>
|
- even: 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
}
HTML
<!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>GeeksforGeeks</li>
<li>A Computer Science portal</li>
<li>Welcome to GeeksforGeeks</li>
</body>
</html>
|
- Example: This example uses both :even and :odd pseudo-class selector.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
li:nth-child(odd) {
background: green;
font-size: 36px;
color:white;
}
li:nth-child(even) {
background: Blue;
font-size: 36px;
color:yellow;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>:even and :odd pseudo-class</h2>
<li>Data Structure</li>
<li>Operating System</li>
<li>Computer Networks</li>
<li>C Programming</li>
</body>
</html>
|
Supported Browsers:
- Google Chrome 4.0
- Internet Explorer 9.0
- Firefox 3.5
- Opera 9.6
- Safari 3.2
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
16 Dec, 2021
Like Article
Save Article