Home > Article > Web Front-end > How to make the first li unstyled with css
How to make the first li unstyled with css
- 青灯夜游Original
- 2022-09-02 19:02:532137browse
In CSS, leaving the first li unstyled means excluding the first li and adding styles to other li elements. 3 methods: 1. Use ":not()" and ":first-child", the syntax is "element:not(:first-child){style}"; 2. Use ":nth-of-type", the syntax "Element:nth-of-type(n 2){style}"; 3. Use ":nth-child", the syntax is "Element:nth-child(n 2){style}".
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
Let the first li not be styled, which is to add styles to other li except the first li.
3 implementation methods
Method 1: Use selectors: not() and: first-child
Use:first-child to select the first element
Then use
:not()to match the non-first element Other elements of child elements
Example: Let the first li not add a red background style, and add a red background to other li elements except the first li element
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
li{
float: left;
height: 50px;
line-height: 50px;
width: 50px;
margin: 20px;
background: #ccc;
text-align: center;
color: #fff;
}
li:not(:first-child){
background:red;
}
</style>
</head>
<body>
<ul class="dom">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
Description:
:not(selector)The selector matches every element that is not the specified element/selector.:first-childSelector The specified selector is used to select the first child element that belongs to its parent element.
Method 2: Use :nth-of-type()
:nth-of- type(n) The selector matches every element that is the Nth child element of a specific type of the parent element.
n starts from 0, then n 2 is naturally Start with the 2nd element.
li:nth-of-type(n+2){
background:pink;
}
Similarly, if you select an odd number element, then is 2n 1; if you want to select an even number element, then it should be written as 2n 2;The specific situation can be used according to the project situation.
li:nth-of-type(2n+1){
background:pink;
}
li:nth-of-type(2n+2){
background:green;
}
Method 3: Use :nth-child()
:nth-child(n ) selector matches the Nth child element that belongs to its parent element, regardless of the element's type.
For method 3 and method 2 types, just set the value of () to "n 2".
li:nth-child(n+2){
background:green;
}
Similarly, if you want to select odd-numbered elements, then it is 2n 1; if you want to select even-numbered elements, then you should write 2n 2;The specific situation can be used according to the project situation.
li:nth-child(2n+1){
background:green;
}
li:nth-child(2n+2){
background:pink;
}
（Learning video sharing: Getting started with web front-end）
The above is the detailed content of How to make the first li unstyled with css. For more information, please follow other related articles on the PHP Chinese website!