Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Style Even and Odd List Items?
Lists are a collection of items that are thought to be one of the best ways to represent information. The list element in HTML is the one that helps us structure the content on our page. It is one of the most commonly used elements, whether for navigation or for displaying general content. HTML allows us to represent lists in three ways: ordered lists, unordered lists, and description lists.
-
Unordered List: This type of list is used to represent HTML items that are not in any particular order. The
<ul>tag is employed to define unordered lists. -
Ordered List: It is used to represent HTML list items that are ordered in a specific sequence. The
<ol>tag is employed to define ordered lists. -
Description Lists: It allows us to create lists with descriptions for each item in the list. The list item is specified using the
<dt>tag and the<dd>tag is used to add the list item's description. They are both enclosed in a<dl>tag.
Syntax
Following is the syntax for styling even list items using the :nth-child pseudo-class
li:nth-child(even) {
/* CSS properties for even items */
}
Following is the syntax for styling odd list items
li:nth-child(odd) {
/* CSS properties for odd items */
}
Basic List Styling
Example
Let us see an example of a simple list styled using CSS properties
<!DOCTYPE html>
<html>
<head>
<title>Basic List Styling</title>
<style>
ol {
font-family: Arial, sans-serif;
padding: 10px;
}
li {
background-color: wheat;
width: 225px;
color: sienna;
font-weight: bold;
margin: 3px 0;
padding: 8px;
border-radius: 4px;
}
</style>
</head>
<body>
<h3>Famous International Travel Destinations</h3>
<ol>
<li>Maldives</li>
<li>Bali</li>
<li>Singapore</li>
<li>Dubai</li>
<li>Thailand</li>
</ol>
</body>
</html>
The output displays all list items with identical styling
Famous International Travel Destinations 1. Maldives (wheat background, sienna text) 2. Bali (wheat background, sienna text) 3. Singapore (wheat background, sienna text) 4. Dubai (wheat background, sienna text) 5. Thailand (wheat background, sienna text)
By default, the styling properties are applied to all list items uniformly. If we need to style the odd and even list items separately, we have to make use of pseudo-classes in CSS.
Using the :nth-child Pseudo-Class
A CSS pseudo-class is a keyword added to a selector that specifies the selected element's special state. It begins with a colon (:) and ends with the pseudo-class name.
The pseudo-class :nth-child() selects and adds styles to elements based on their index or position within a group of siblings. A number, a keyword, or a formula can be used to specify the :nth-child().
Styling Even List Items
Elements with even numeric positions are affected (e.g., 2, 4, 6, 8, etc.). This creates an alternating pattern starting with the second item.
Example
The purpose of this example is to demonstrate the styling of even list elements using the :nth-child pseudo-class with the even keyword
<!DOCTYPE html>
<html>
<head>
<title>Styling Even List Items</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
ol {
padding: 10px;
}
li {
width: 300px;
padding: 10px;
margin: 3px 0;
border-radius: 4px;
}
li:nth-child(even) {
background-color: mistyrose;
color: sienna;
font-weight: bold;
font-size: 18px;
}
h3 {
color: sienna;
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<h3>Steps to Make Tea</h3>
<ol>
<li>Heat water in a vessel.</li>
<li>Add tea leaves, ginger, cardamom and some tea masala.</li>
<li>Let it simmer for a while until the flavours get infused properly.</li>
<li>Now, add milk and sugar as required.</li>
<li>Bring it to a boil.</li>
<li>Strain and serve.</li>
</ol>
</body>
</html>
The output shows only the even-positioned items (2nd, 4th, 6th) with enhanced styling
Steps to Make Tea 1. Heat water in a vessel. (default styling) 2. Add tea leaves, ginger, cardamom and some tea masala. (styled: mistyrose background, bold) 3. Let it simmer for a while until the flavours get infused. (default styling) 4. Now, add milk and sugar as required. (styled: mistyrose background, bold) 5. Bring it to a boil. (default styling) 6. Strain and serve. (styled: mistyrose background, bold)
Styling Odd List Items
Elements with odd numeric positions are affected (e.g., 1, 3, 5, 7, etc.). This creates an alternating pattern starting with the first item.
Example
In this example we will style the odd list items using the :nth-child pseudo-class with the odd keyword
<!DOCTYPE html>
<html>
<head>
<title>Styling Odd List Items</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
ol {
padding: 10px;
}
li {
width: 300px;
padding: 10px;
margin: 3px 0;
border-radius: 4px;
}
li:nth-child(odd) {
background-color: mintcream;
color: mediumturquoise;
font-weight: 550;
font-size: 20px;
border: 1px solid teal;
}
h3 {
color: teal;
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<h3>Programming Languages</h3>
<ol>
<li>JavaScript</li>
<li>Python</li>
<li>Java</li>
<li>C++</li>
<li>Ruby</li>
<li>Go</li>
</ol>
</body>
</html>
The output shows only the odd-positioned items (1st, 3rd, 5th) with enhanced styling
Programming Languages 1. JavaScript (styled: mintcream background, teal border, bold) 2. Python (default styling) 3. Java (styled: mintcream background, teal border, bold) 4. C++ (default styling) 5. Ruby (styled: mintcream background, teal border, bold) 6. Go (default styling)
Styling Both Odd and Even List Items
For maximum visual appeal, you can combine both odd and even selectors to create alternating row styling that enhances readability.
Example
This example shows how we can style both odd and even list items separately using the odd and even keyword values with the :nth-child pseudo-class
<!DOCTYPE html>
<html>
<head>
<title>Styling Both Odd and Even Items</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
ol {
padding: 10px;
}
li {
width: 350px;
padding: 12px;
margin: 2px 0;
border-radius: 6px;
transition: all 0.3s ease;
}
li:nth- 
700 Views
