Select all Children except First with css

Asked

Viewed 1,363 times

1

<div class="main">
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
</div>

I wanted to insert some properties in "content" class Ivs, but I wanted these properties to ignore the first child, like the margin for example. I would like everyone to have a distance of 20px from each other, but if I apply directly the class "content", the first child also spaces 20px from the top of the browser and I don’t want the fact to occur. Can someone help me?

html css responsive-layout

  • A hint. If you want to apply a margin between the elements and you don’t want to apply this margin to the top, you can use the css property margin-bottom.

  • But then the last child would also take the margin-bottom. And, depending on the case, sometimes that lower margin may not be necessary. But still thanks for the suggestion!

  • Ai when you need to set more rules the ideal is to use the selectors @hugocsl mentioned :)

1 answer

5

There are some different approaches to this, the one that has pleased me the most is with the :not() to make the exclusion of first-child

.content:not(:first-child) {
  color:red;
}

  
<div class="main">
    <div class="content">item </div>
    <div class="content">item </div>
    <div class="content">item </div>
    <div class="content">item </div>
    <div class="content">item </div>
</div>

OBS: If you do not want to catch either the first or the last child you can concatenate more than one :not() guy .content:not(:first-child):not(:last-child)

Browser support: https://caniuse.com/#feat=css-sel3

Browser other questions tagged html css responsive-layout

You are not signed in. Login or sign up in order to post.