Home >Web Front-end >CSS Tutorial >How to exclude the first child element in css

How to exclude the first child element in css

青灯夜游Original: 2022-08-29 18:28:329421browse

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

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>

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

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

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

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

How to exclude the first child element in css

.dom div+div{
   background:peru;
}

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!

html5 css css3 选择器

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

Previous article：CSS mask-composite advanced techniques: arbitrary color conversion of a single imageNext article：CSS mask-composite advanced techniques: arbitrary color conversion of a single image

See more

How to exclude the first child element in css

Related articles