Home >Web Front-end >Front-end Q&A >How to make the first li unstyled with css

How to make the first li unstyled with css

青灯夜游
青灯夜游Original
2022-09-02 19:02:532195browse

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}".

How to make the first li unstyled with css

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>

How to make the first li unstyled with css

Description:

  • :not(selector) The selector matches every element that is not the specified element/selector.

  • :first-child Selector 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;
}

How to make the first li unstyled with css

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;
}

How to make the first li unstyled with css

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;
}

How to make the first li unstyled with css

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;
}

How to make the first li unstyled with css

(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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn