Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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.
Example
Let us see an example of a simple list styled using CSS properties.
<!DOCTYPE html>
<html>
<head>
<title>List Styling in CSS</title>
<style>
li{
background-color:wheat;
width:225px;
color:sienna;
font-weight:bold;
}
</style>
</head>
<body>
<p>Famous International Travel Destinations</p>
<ol>
<li>Maldives</li>
<li>Bali</li>
<li>Singapore</li>
<li>Dubai</li>
<li>Thailand</li>
</ol>
</body>
</html>
By default, the styling properties are applied to the list as a whole. 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().
With Odd Keyword Values
Elements with odd numeric positions are affected (e.g. 1, 3, 5, 7 etc.). Following is the syntax –
li:nth-child( odd ) {
// Set of CSS properties
}
With Even Keyword Values
Elements with even numeric positions are affected (e.g 2, 4, 6, 8 etc.). Following is the syntax –
li:nth-child( even ) {
// Set of CSS properties
}
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>How to Style Even and Odd List Items</title>
<style>
li{
width:300px;
padding:5px;
}
li:nth-child(even) {
background-color:mistyrose;
color:sienna;
font-weight:bold;
font-size:18px;
}
p{
color:sienna;
font-size:20px;
font-weight:bold;
}
</style>
</head>
<body>
<p>Steps to make Tea</p>
<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>
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>How to Style Even and Odd List Items</title>
<style>
li{
width:300px;
padding:5px;
}
li:nth-child(odd) {
background-color:mintcream;
color:mediumturquoise;
font-weight:550;
font-size:20px;
border:1px solid teal;
}
p{
color:teal;
font-size:20px;
font-weight:bold;
}
</style>
</head>
<body>
<p>Steps to make Tea</p>
<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>
Example
This last 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>How to Style Even and Odd List Items</title>
<style>
li{
width:320px;
padding:5px;
}
li:nth-child(even) {
background-color:mistyrose;
color:sienna;
font-weight:bold;
font-size:18px;
}
li:nth-child(odd) {
background-color:mintcream;
color:mediumturquoise;
font-weight:550;
font-size:20px;
}
p{
color:darkslategray;
font-size:20px;
font-weight:bold;
}
</style>
</head>
<body>
<p>Steps to make Tea</p>
<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>
129 Views
