CSS Select Even
CSS Select Even
In CSS, we often need to select odd or even items of an element for styling. This is extremely useful when designing web page layouts, making them look more aesthetically pleasing and organized. This article will detail how to use CSS selectors to select even-numbered items, providing several code examples to help you better understand.
1. Selecting Even-Numbered Items Using the :nth-child() Selector
The :nth-child() selector selects specific elements based on their position within their parent element. By combining the :nth-child() selector with the even keyword, we can select all even-numbered elements. Here is a simple sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Even Items</title>
<style> li:nth-child(even) {
background-color: lightblue;
}
</style>
</head>
<body>
<ul>
<li>Item 1 - geek-docs.com</li>
<li>Item 2 - geek-docs.com</li>
<li>Item 3 - geek-docs.com</li>
<li>Item 4 - geek-docs.com</li>
<li>Item 5 - geek-docs.com</li>
</ul>
</body>
</html>
Code running results:
In the example above, we use the :nth-child(even) selector to select all even-numbered li elements and set their background color to light blue. When the page loads, you’ll notice that the background color of the second and fourth li elements changes to light blue.
2. Selecting Even Numbered Items with the :nth-of-type() Selector
In addition to the :nth-child() selector, we can also use the :nth-of-type() selector to select even-numbered elements. The difference is that the :nth-of-type() selector only considers the element’s type, not its position in the document. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Even Items</title>
<style>
li:nth-of-type(even) {
color: red;
}
</style>
</head>
<body>
<ul>
<li>Item 1 - geek-docs.com</li>
<li>Item 2 - geek-docs.com</li>
<li>Item 3 - geek-docs.com</li>
<li>Item 4 - geek-docs.com</li>
<li>Item 5 - geek-docs.com</li>
</ul>
</body>
</html>
Code Running Results:
In the example above, we use the :nth-of-type(even) selector to select all even-numbered li elements and set their text color to red. When the page loads, you’ll notice that the text color of the 2nd and 4th li elements changes to red.
3. Dynamically Add Styles for Even-Numbered Items Using JavaScript
Sometimes, we need to dynamically add styles to even-numbered items based on user actions or other conditions. This can be achieved using JavaScript. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Even Items</title>
<style>
.even {
background-color: lightgreen;
}
</style>
</head>
<body>
<ul id="list">
<li>Item 1 - geek-docs.com</li>
<li>Item 2 - geek-docs.com</li>
<li>Item 3 - geek-docs.com</li>
<li>Item 4 - geek-docs.com</li>
<li>Item 5 - geek-docs.com</li>
</ul>
<script>
const list = document.getElementById('list');
const items = list.getElementsByTagName('li');
for (let i = 0; i < items.length; i++) {
if (i % 2 === 1) {
items[i].classList.add('even');
}
}
</script>
</body>
</html>
Code Running Results:
In the example above, we use JavaScript to dynamically add a light green background color to the even-numbered li elements. When the page loads, you’ll notice that the background color of the second and fourth li elements changes to light green.
4. Use CSS Pseudo-Class Selectors to Select Even-Numbered Items
In addition to the :nth-child() and :nth-of-type() selectors, CSS provides several pseudo-class selectors for selecting even-numbered elements. Here are some common pseudo-class selector example codes:
4.1 :nth-child(2n)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Even Items</title>
<style>
li:nth-child(2n) {
font-weight: bold;
}
</style>
</head>
<body>
<ul>
<li>Item 1 - geek-docs.com</li>
<li>Item 2 - geek-docs.com</li>
<li>Item 3 - geek-docs.com</li>
<li>Item 4 - geek-docs.com</li>
<li>Item 5 - geek-docs.com</li>
</ul>
</body>
</html>
Result of running the code:
In the example above, we use the :nth-child(2n) selector to select all even-numbered li elements and set their font to bold. When the page loads, you’ll notice that the font of the li elements in items 2 and 4 becomes bold.
4.2 :nth-of-type(2n)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Even Items</title>
<style>
li:nth-of-type(2n) {
text-decoration: underline;
}
</style>
</head>
<body>
<ul>
<li>Item 1 - geek-docs.com</li>
<li>Item 2 - geek-docs.com</li>
<li>Item 3 - geek-docs.com</li>
<li>Item 4 - geek-docs.com</li> <li>Item 5 - geek-docs.com</li>
</ul>
</body>
</html>
Result of running this code:
In the example above, we use the :nth-of-type(2n) selector to select all even-numbered li elements and underline their text. When the page loads, you’ll notice that the text of the 2nd and 4th li elements is underlined.
5. Conclusion
Through this article, I believe readers have learned how to use CSS selectors to select even-numbered elements and mastered various methods and techniques. In actual development, choosing the appropriate style method based on specific needs can make the page look more beautiful and neat.