Use of :even and :odd pseudo-classes with list items in CSS
Last Updated :
16 Dec, 2021
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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...