Home > Web Front-end > Front-end Q&A > How to exclude the first child element in css

How to exclude the first child element in css

藏色散人
Release: 2023-01-04 09:35:32
Original
9259 people have browsed it

How to exclude the first child element in css: 1. Exclusion by using the pseudo-class selector ":not"; 2. Exclusion by using "nth-of-type" or "nth-child" ;3. Use the " " or "~" sibling selector to obtain sub-elements excluding the first one.

How to exclude the first child element in css

The operating environment of this article: Windows7 system, HTML5&&CSS3 version, Dell G3 computer.

css gets the child elements except the first one

In front-end page development, you need to use css to select the child elements except the first one. For example, if you want a certain distance between each span, you cannot set margin-left for each span. This will cause a gap in front of the first span and affect typesetting. Next, we will explain various methods to implement css to obtain child elements other than the first one.

The effect is as follows:

How to exclude the first child element in css

Design dock https://www.wode007.com/sites/73738.html

The basic structure is as follows:

<style>
.dom div{
    float: left;
    height: 150px;
    line-height: 150px;
    width: 150px;
    margin: 20px;
    background: #ccc;
    text-align: center;
    color:#fff;
}
</style>
 <div class="dom">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>
Copy after login

Method 1: Use pseudo-class selector: not

<style>
.dom  div:not(:first-child){
	background:red;
}
</style>
Copy after login

Description:

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

:first-child selector is used to select the specified selector that belongs to the first child element of its parent element.

Method 2: Use nth-of-type or nth-child

<style>
.dom div:nth-of-type(n+2){
background:red;
}
</style>
Copy after login

Or:

<style>
.dom div:nth-child(n+2){
background:red;
}
</style>
Copy after login

Explanation:

n starts from 0, Then n 2 naturally starts from the second element. Similarly, if you select an odd number element, it is 2n 1. If you want to select an even number element, you should write it as 2n 2; the specific situation can be used according to the project situation.

[Recommended learning: css video tutorial]

Method 3: Use the or~brother selector cleverly

<style>
.dom div+div{
   background:red;
}
</style>
Copy after login

or :

<style>
.dom div~div{
  background:red;
}
</style>
Copy after login

Description:

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.

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!

Related labels:
css
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template