CSS list number style
CSS List Styles
In CSS, we often use lists to display a group of related items. Sometimes we need to style a specific item in a list, which requires a selector that specifies the first item in the list. In this article, we’ll detail how to use CSS selectors to select the first item in a list, and provide example code.
1. Selecting the First Item
To select the first item in a list, we can use the :first-child pseudo-class selector. Here is a sample code:
<!DOCTYPE html>
<html>
<head>
<style>
ul li:first-child {
color: red;
}
</style>
</head>
<body>
<ul> <li>First Style</li>
<li>Second Style</li>
<li>Third Style</li>
</ul>
</body>
</html>
Output:
In the example above, we use the :first-child selector to select the first style in the list and set its color to red. After running the code, you’ll see that the text of the first style turns red.
2. Selecting the Second Style
To select the second style in the list, we use the :nth-child() pseudo-class selector and pass it the argument 2. Here is a sample code:
<!DOCTYPE html>
<html>
<head>
<style>
ul li:nth-child(2) {
font-weight: bold;
}
</style>
</head>
<body>
<ul>
<li>First style</li>
<li>Second style</li>
<li>Third style</li>
</ul>
</body>
</html>
Output:
In the example above, we use the :nth-child(2) selector to select the second style in the list and make it bold. After running the code, you will see that the text of the second style becomes bold.
3. Select the Third Style
To select the third style in the list, we can use the :nth-child() pseudo-class selector and pass it the argument 3. Here is a sample code:
<!DOCTYPE html>
<html>
<head>
<style>
ul li:nth-child(3) {
text-decoration: underline;
}
</style>
</head>
<body>
<ul>
<li>First style</li>
<li>Second style</li>
<li>Third style</li>
</ul>
</body>
</html>
Output:
In the example above, we use the :nth-child(3) selector to select the third style in the list and underline its text. After running the code, you will see that the text of the third style is underlined.
4. Selecting Even-Numbered Styles
To select even-numbered styles in a list, we can use the :nth-child() pseudo-class selector and pass in the parameter even. Here is a sample code:
<!DOCTYPE html>
<html>
<head>
<style>
ul li:nth-child(even) {
background-color: lightblue;
}
</style>
</head>
<body>
<ul>
<li>First style</li>
<li>Second style</li>
<li>Third style</li>
<li>Fourth style</li>
</ul>
</body>
</html>
Output:
<!DOCTYPE html>
<html>
<head>
<style>
ul li:nth-child(odd) {
color: green;
}
</style>
</head>
<body>
<ul>
<li>First style</li>
<li>Second style</li>
<li>Third style</li>
<li>Fourth style</li>
</ul>
</body>
</html>
Output:
In the example above, we use the :nth-child(odd) selector to select the odd-numbered styles in the list and set their text color to green. After running the code, you’ll see that the text of the first and third styles turns green.
6. Selecting a Specific Range of Styles
In addition to selecting a specific position, we can also select a specific range of styles within a list. For example, we can select styles from the second to the fourth. Here is a sample code:
<!DOCTYPE html>
<html>
<head>
<style>
ul li:nth-child(n+2):nth-child(-n+4) {
font-style: italic;
}
</style>
</head>
<body>
<ul>
<li>First style</li>
<li>Second style</li>
<li>Third style</li>
<li>Fourth style</li>
<li>Fifth style</li>
</ul>
</body>
</html>
Output:
In the example above, we use the :nth-child(n+2):nth-child(-n+4) selector to select the second through fourth styles in the list and set their font style to italic. After running the code, you will see that the text of the second, third, and fourth styles has become italic.
7. Selecting the Last Style
To select the last style in the list, we can use the :last-child pseudo-class selector. Here is a sample code:
<!DOCTYPE html>
<html>
<head>
<style>
ul li:last-child {
text-transform: uppercase;
}
</style>
</head>
<body>
<ul>
<li>First style</li>
<li>Second style</li>
<li>Third style</li>
</ul>
</body>
</html>
Output:
<!DOCTYPE html>
<html>
<head>
<style>
ul li:nth-last-child(2) {
color: purple;
}
</style>
</head>
<body>
<ul>
<li>First style</li>
<li>Second style</li>
<li>Third style</li>
</ul>
</body>
</html>
Output:
<!DOCTYPE html>
<html>
<head>
<style>
ul li:nth-child(2n) {
font-size: 20px;
}
</style>
</head>
<body>
<ul>
<li>First style</li>
<li>Second style</li>
<li>Third style</li>
<li>Fourth style</li>
<li>Fifth style</li>
</ul>
</body>
</html>
Output:
In the example above, we use the :nth-child(2n) selector to select every third style in the list and set its font size to 20 pixels. After running the code, you’ll see that the font size of the second and fourth styles has been changed to 20 pixels.
11. Selecting Every Third Style
To select every third style in a list, we can use the :nth-child() pseudo-class selector and pass it the argument 3n. Here is a sample code:
<!DOCTYPE html>
<html>
<head>
<style>
ul li:nth-child(3n) {
background-color: lightyellow;
}
</style>
</head>
<body>
<ul>
<li>First style</li>
<li>Second style</li>
<li>Third style</li>
<li>Fourth style</li>
<li>Fifth style</li>
</ul>
</body>
</html>
Output:
In the example above, we use the :nth-child(3n) selector to select every third style in the list and set its background color to light yellow. After running the code, you’ll see that the background of the third style changes to light yellow.
12. Selecting the First and Last Styles
To select the first and last styles in a list, we can use the :first-child and :last-child pseudo-class selectors. Here’s a sample code:
<!DOCTYPE html>
<html>
<head>
<style>
ul li:first-child,
ul li:last-child {
color: orange;
}
</style>
</head>
<body>
<ul>
<li>First style</li>
<li>Second style</li>
<li>Third style</li>
<li>Fourth style</li>
<li>Fifth style</li>
</ul>
</body>
</html>
Output:
In the example above, we use the :first-child and :last-child selectors to select the first and last styles in the list and set their text color to orange. After running the code, you’ll see the text of the first and last styles turn orange.
13. Selecting Odd-Numbered Styles
To select styles in odd-numbered positions in a list, we can use the :nth-child() pseudo-class selector and pass it the odd argument. Here is a sample code:
<!DOCTYPE html>
<html>
<head>
<style>
ul li:nth-child(odd) {
font-weight: bold;
}
</style>
</head>
<body>
<ul>
<li>First style</li>
<li>Second style</li>
<li>Third style</li>
<li>Fourth style</li>
<li>Fifth style</li>
</ul>
</body>
</html>
Output:
In the example above, we use the :nth-child(odd) selector to select the styles in the odd-numbered positions in the list and make them bold. After running the code, you’ll see that the first, third, and fifth styles are bolded.
14. Selecting Even-Numbered Styles
To select even-numbered styles in a list, we can use the :nth-child() pseudo-class selector and pass it the argument even. Here’s a sample code:
<!DOCTYPE html>
<html>
<head>
<style>
ul li:nth-child(even) {
text-decoration: underline;
}
</style>
</head>
<body>
<ul>
<li>First style</li>
<li>Second style</li>
<li>Third style</li>
<li>Fourth style</li>
<li>Fifth style</li>
</ul>
</body>
</html>
Output:
In the example above, we use the :nth-child(even) selector to select the even-numbered styles in the list and underline their text. After running the code, you’ll see that the second and fourth styles are underlined.
15. Selecting the Third-to-Last to the First-to-Last Styles
To select the third-to-last to the first-to-last styles in a list, we can use the :nth-last-child() pseudo-class selector and pass it the argument -n+3. Here’s a sample code:
<!DOCTYPE html>
<html>
<head>
<style>
ul li:nth-last-child(-n+3) {
color: blue;
}
</style>
</head>
<body>
<ul>
<li>First style</li>
<li>Second style</li>
<li>Third style</li>
<li>Fourth style</li>
<li>Fifth style</li>
</ul>
</body>
</html>
Output:
In the example above, we use the :nth-last-child(-n+3) selector to select the third-to-last through the first-to-last styles in the list and set their text color to blue. After running the code, you’ll see the text of the third-to-last, second-to-last, and first-to-last styles turn blue.
16. Selecting the First and Third Styles
To select the first and third styles in a list, we can use the :nth-child() pseudo-class selector and pass it the arguments 1 and 3. Here is a sample code:
<!DOCTYPE html>
<html>
<head>
<style>
ul li:nth-child(1),
ul li:nth-child(3) {
font-style: italic;
}
</style>
</head>
<body>
<ul>
<li>First style</li>
<li>Second style</li>
<li>Third style</li>
<li>Fourth style</li>
<li>Fifth style</li>
</ul>
</body>
</html>
Output:
In the above example, we use the :nth-child(1), :nth-child(3) selector to select the first and third styles in the list and set their font style to italic. After running the code, you will see that the text of the first and third styles becomes italic.
17. Select the second and fourth styles
To select the second and fourth styles in the list, we can use the :nth-child() pseudo-class selector and pass in the parameters 2 and 4. Here is a sample code:
<!DOCTYPE html>
<html>
<head>
<style>
ul li:nth-child(2),
ul li:nth-child(4) {
text-transform: uppercase;
}
</style>
</head>
<body>
<ul>
<li>First style</li>
<li>Second style</li>
<li>Third style</li>
<li>Fourth style</li>
<li>Fifth style</li>
</ul>
</body>
</html>
Output:
In the example above, we use the :nth-child(2), :nth-child(4) selectors to select the second and fourth styles in the list and convert their text to uppercase. After running the code, you will see that the text of the second and fourth styles has been uppercase.
18. Selecting the first to third styles
To select the first to third styles in the list, we can use the :nth-child() pseudo-class selector and pass in the parameters n+1 and n+3. Here’s a sample code:
<!DOCTYPE html>
<html>
<head>
<style>
ul li:nth-child(n+1):nth-child(-n+3) {
background-color: lightblue;
}
</style>
</head>
<body>
<ul>
<li>First style</li>
<li>Second style</li>
<li>Third style</li>
<li>Fourth style</li>
<li>Fifth style</li>
</ul>
</body>
</html>
Output:
In the example above, we use the :nth-child(n+1):nth-child(-n+3) selector to select the first through third styles in the list and set their background color to light blue. After running the code, you’ll see that the background color of the first through third styles changes to light blue.