How to exclude the first child element in css-CSS Tutorial-php.cn

How to exclude the first child element in css

青灯夜游

Release： 2022-08-29 18:28:32

Original

9399 people have browsed it

4 methods: 1. Use ":not()" and ":first-child", the syntax is "element:not(:first-child){style}"; 2. Use ":nth- of-type", the syntax is "Element:nth-of-type(n 2){style}"; 3. Use ":nth-child", the syntax is "Element:nth-child(n 2){style}"; 4. , use the selector " " or "~", the syntax is "element element {style}" or "element ~ element {style}".

How to exclude the first child element in css

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

4 ways to exclude the first child element in css

Method 1: Use selector: not() and: first-child

Use: first-child to select the first element
and then use :not()Match other elements that are not the first child element

Example: Add a red background to other elements except the first child element

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<style>
			.dom div {
				float: left;
				height: 150px;
				line-height: 150px;
				width: 150px;
				margin: 20px;
				background: #ccc;
				text-align: center;
				color: #fff;
			}
			.dom  div:not(:first-child){
			
			    background:red;
			
			}
		</style>
	</head>

	<body>
		<div class="dom">
			<div>1</div>
			<div>2</div>
			<div>3</div>
		</div>
	</body>

</html>

Copy after login

How to exclude the first child element in 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.

.dom div:nth-of-type(n+2){
background:pink;
}

Copy after login

How to exclude the first child element in 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.

.dom div:nth-of-type(2n+1){
background:pink;
}
.dom div:nth-of-type(2n+2){
background:green;
}

Copy after login

How to exclude the first child element in 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".

.dom div:nth-child(n+2){
background:green;
}

Copy after login

How to exclude the first child element in css

Method 4: Use the sibling selector or ~

## Selector: If you need to select an element immediately after another element, and both have the same parent element, you can use the adjacent sibling selector.
~ Selector: Its function is to find all sibling nodes behind a specified element.

Since they are all div elements, the first element has no sibling elements, so you can get the child elements except the first one.

.dom div+div{
   background:red;
}

Copy after login

How to exclude the first child element in css

.dom div+div{
   background:peru;
}

Copy after login

How to exclude the first child element in css

（Learning video sharing:

Getting started with web front-end）

The above is the detailed content of How to exclude the first child element in css. For more information, please follow other related articles on the PHP Chinese website!