CSS odd selectors
CSS Odd-Number Selectors
In CSS, selectors are often used to select specific elements for styling. The odd-number selector is a very useful selector that can be used to style an odd number of children within an element. In this article, we’ll explain how to use the odd-number selector in CSS and provide some sample code to help you better understand it.
1. Basic Usage
The odd selector can be implemented using :nth-child(odd), where odd selects an odd number of child elements. Here’s a simple example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Odd Selector Example</title>
<style>
div:nth-child(odd) {
background-color: lightblue;
}
</style>
</head>
<body>
<div>1. geek-docs.com</div>
<div>2. geek-docs.com</div>
<div>3. geek-docs.com</div>
<div>4. geek-docs.com</div>
<div>5. geek-docs.com</div>
</body>
</html>
Output:
In the example above, we use the div:nth-child(odd) selector to select an odd number of div elements and set their background color to lightblue. After running the code, you’ll see that the background color of the first, third, and fifth div elements changes to light blue.
2. Selecting Elements of a Specific Type
In addition to selecting all elements with odd children, we can also select elements with odd children of a specific type. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Odd Selector Example</title>
<style>
ul li:nth-child(odd) {
color: red;
}
</style>
</head>
<body>
<ul>
<li>1. geek-docs.com</li>
<li>2. geek-docs.com</li>
<li>3. geek-docs.com</li>
<li>4. geek-docs.com</li>
<li>5. geek-docs.com</li>
</ul>
</body>
</html>
Output:
In the example above, we use the ul li:nth-child(odd) selector to select odd-numbered li elements within the ul element and set the text color to red. After running the code, you’ll see that the text color of the first, third, and fifth li elements changes to red.
3. Selecting Elements of a Specific Class
In addition to selecting elements of a specific type, we can also select an odd number of child elements within an element of a specific class. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Odd Selector Example</title>
<style>
.list-item:nth-child(odd) {
font-weight: bold;
}
</style>
</head>
<body>
<ul>
<li class="list-item">1. geek-docs.com</li>
<li class="list-item">2. geek-docs.com</li>
<li class="list-item">3. geek-docs.com</li>
<li class="list-item">4. geek-docs.com</li>
<li class="list-item">5. geek-docs.com</li>
</ul>
</body>
</html>
Output:
In the example above, we use the .list-item:nth-child(odd) selector to select the odd-numbered children of the element with the class list-item and set the font to bold. After running the code, you’ll see that the fonts of the first, third, and fifth li elements are now bold.
4. Selecting Elements with a Specific ID
In addition to selecting elements with a specific class, we can also select an odd number of child elements within an element with a specific ID. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Odd Selector Example</title>
<style>
#item-list li:nth-child(odd) {
text-decoration: underline;
}
</style>
</head>
<body>
<ul id="item-list">
<li>1. geek-docs.com</li>
<li>2. geek-docs.com</li>
<li>3. geek-docs.com</li>
<li>4. geek-docs.com</li>
<li>5. geek-docs.com</li>
</ul>
</body>
</html>
Output:
In the example above, we use the #item-list li:nth-child(odd) selector to select the odd-numbered li elements within the element with the ID item-list and set the text underline. After running the code, you can see that the text of the first, third, and fifth li elements is underlined.
5. Select Odd Rows
In addition to selecting odd-numbered child elements, we can also select odd-numbered rows for styling. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Odd Selector Example</title>
<style>
tr:nth-child(odd) {
background-color: lightgreen;
}
</style>
</head>
<body>
<table>
<tr>
<td>1. geek-docs.com</td>
<td>2. geek-docs.com</td>
<td>3. geek-docs.com</td>
</tr>
<tr>
<td>4. geek-docs.com</td>
<td>5. geek-docs.com</td>
<td>6. geek-docs.com</td>
</tr>
</table>
</body>
</html>
Output:
In the example above, we use the tr:nth-child(odd) selector to select the odd-numbered rows in the table and set the background color to lightgreen. After running the code, you can see that the background color of rows 1 and 3 has changed to light green.
6. Select Odd Columns
In addition to selecting odd rows, we can also select odd columns for styling. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Odd Selector Example</title>
<style>
td:nth-child(odd) {
color: blue;
}
</style>
</head>
<body>
<table>
<tr>
<td>1. geek-docs.com</td>
<td>2. geek-docs.com</td>
<td>3. geek-docs.com</td>
</tr>
<tr>
<td>4. geek-docs.com</td>
<td>5. geek-docs.com</td>
<td>6. geek-docs.com</td>
</tr>
</table>
</body>
</html>
Output:
In the example above, we use the td:nth-child(odd) selector to select the odd-numbered columns in the table and set the text color to blue. After running the code, you can see that the text color of columns 1 and 3 has changed to blue.
7. Select Odd Elements
In addition to selecting odd-numbered rows and columns, we can also select odd-numbered elements for styling. Here is an example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Odd Selector Example</title>
<style>
p:nth-child(odd) {
font-style: italic;
}
</style>
</head>
<body>
<p>1. geek-docs.com</p>
<p>2. geek-docs.com</p>
<p>3. geek-docs.com</p>
<p>4. geek-docs.com</p>
<p>5. geek-docs.com</p>
</body>
</html>
Output:
In the example above, we use the p:nth-child(odd) selector to select the odd-numbered elements within a paragraph element and set the font style to italic. After running the code, you can see that the font style of the first, third, and fifth paragraph elements has changed to italic.
8. Selecting Odd-Numbered Groups of Elements
In addition to selecting the odd-numbered children of a single element, we can also select the odd-numbered children of multiple elements. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Odd Selector Example</title>
<style>
div:nth-child(odd), p:nth-child(odd) {
color: purple;
}
</style>
</head>
<body>
<div>1. geek-docs.com</div>
<p>2. geek-docs.com</p>
<div>3. geek-docs.com</div>
<p>4. geek-docs.com</p>
<div>5. geek-docs.com</div>
</body>
</html>
Output:
In the example above, we use the div:nth-child(odd), p:nth-child(odd) selectors to select the odd-numbered child elements of the div and p elements and set the text color to purple. After running the code, you can see that the text color of the first, third, and fifth div and p elements has changed to purple.
9. Selecting Odd-Numbered Element’s Children
In addition to selecting odd-numbered child elements, we can also style the children of odd-numbered elements. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Odd Selector Example</title>
<style>
ul:nth-child(odd) li {
background-color: lightyellow;
}
</style>
</head>
<body>
<ul>
<li>1. geek-docs.com</li>
<li>2. geek-docs.com</li>
<li>3. geek-docs.com</li>
</ul>
<ul>
<li>4. geek-docs.com</li>
<li>5. geek-docs.com</li> <li>6. geek-docs.com</li>
</ul>
</body>
</html>
Output:
In the example above, we use the ul:nth-child(odd) li selector to select the li child elements within the odd-numbered ul element and set the background color to lightyellow. After running the code, you’ll see that the background color of the first and third li child elements within the ul element changes to light yellow.
10. Selecting Sub-elements of Odd-Numbered Elements
In addition to selecting sub-elements of odd-numbered elements, we can also select sub-elements of odd-numbered elements within a group of multiple elements. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Odd Selector Example</title>
<style>
div:nth-child(odd) p {
font-size: 20px;
}
</style>
</head>
<body>
<div>
<p>1. geek-docs.com</p>
<p>2. geek-docs.com</p>
</div>
<div>
<p>3. geek-docs.com</p>
<p>4. geek-docs.com</p>
</div>
<div>
<p>5. geek-docs.com</p>
<p>6. geek-docs.com</p>
</div>
</body>
</html>
Output:
In the example above, we use the div:nth-child(odd) p selector to select the p child elements within the div element and set the font size to 20px. After running the code, you’ll see that the font size of the p child elements in the first, third, and fifth div elements has been changed to 20px.
Through the above example code, we’ve detailed the use of odd selectors in CSS, including selecting odd-numbered child elements within an element of a specific type, class, or ID; selecting odd-numbered rows, columns, or elements; and selecting children of odd-numbered elements. Readers can flexibly use odd selectors to customize page styling.