How to select the first element in the loop with CSS
How to Select the First Element in a Loop with CSS
In front-end development, you often encounter situations where you need to loop through a list of elements. Sometimes we need to do some special styling to the elements that are looped out, such as adding a specific style to the first element. So how do we select the first element in a loop in CSS? This article will introduce several methods in detail.
1. Use the :nth-child pseudo-class
The :nth-child pseudo-class is a commonly used selector in CSS that selects the nth child of a parent element. We can use :nth-child(1) to select the first element and add styles to it.
ul li:nth-child(1) {
color: red;
}
The above code selects the first element of all li elements under the ul element and sets its text color to red. This allows you to apply special styling to the first element in the list of looped elements.
2. Use the :first-child pseudo-class
In addition to the :nth-child pseudo-class, CSS also provides the :first-child pseudo-class, which is specifically used to select the first child element of a parent element. Using :first-child can also achieve the effect of selecting the first element in the loop and adding styles.
ul li:first-child {
background-color: yellow;
}
The above code selects the first element of all li elements under the ul element and sets its background color to yellow. This method can also achieve special styling for the first element.
3. Combining :first-child and :nth-child
Sometimes we may need to process an element at a specific position, but at the same time we want to retain the universality of :first-child and :nth-child. In this case, we can combine the two to achieve this. For example, we only want to add special styles to the first element, while keeping the default styles for other elements.
ul li:first-child:nth-child(1) {
font-weight: bold;
}
The above code selects the first element of all li elements under the ul element and makes its font bold. In this way, even if the list of elements in the loop changes, the first element will still be correctly selected and styled.
Running Result
Suppose we have a simple ul list that loops through 5 li elements. The code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>CSS Select the First Element</title>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</body>
</html>
The contents of the styles.css file are as follows:
ul li:first-child:nth-child(1) {
color: blue;
}
ul li:first-child {
background-color: yellow;
}
ul li:nth-child(1) {
font-weight: bold;
}
Opening this HTML file in a browser, we can see that the text color of the first li element is blue, the background color is yellow, and the font is bold. This proves that we have successfully selected the first element in the loop and added styles to it.
Through the above introduction, I believe everyone has mastered how to select the first element in the loop and add styles in CSS.