How to exclude the first child element in css

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.

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:

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>

Method 1: Use pseudo-class selector: not

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

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>

Or:

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

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>

or :

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

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!