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

Home

Web Front-end

CSS Tutorial

How to exclude the first child element in css

青灯夜游

Aug 29, 2022 pm 06:28 PM

css

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>

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!

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

A Little Reminder That Pseudo Elements are Children, Kinda.Apr 19, 2025 am 11:39 AM

Here's a container with some child elements:

Menus with 'Dynamic Hit Areas'Apr 19, 2025 am 11:37 AM

Flyout menus! The second you need to implement a menu that uses a hover event to display more menu items, you're in tricky territory. For one, they should

Improving Video Accessibility with WebVTTApr 19, 2025 am 11:27 AM

"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect."- Tim Berners-Lee

Weekly Platform News: CSS ::marker pseudo-element, pre-rendering web components, adding Webmention to your siteApr 19, 2025 am 11:25 AM

In this week's roundup: datepickers are giving keyboard users headaches, a new web component compiler that helps fight FOUC, we finally get our hands on styling list item markers, and four steps to getting webmentions on your site.

Making width and flexible items play nice togetherApr 19, 2025 am 11:23 AM

The short answer: flex-shrink and flex-basis are probably what you’re lookin’ for.

Position Sticky and Table HeadersApr 19, 2025 am 11:21 AM

You can't position: sticky; a

Weekly Platform News: HTML Inspection in Search Console, Global Scope of Scripts, Babel env Adds defaults QueryApr 19, 2025 am 11:18 AM

In this week's look around the world of web platform news, Google Search Console makes it easier to view crawled markup, we learn that custom properties