1

I need to exclude the first child from a display none rule using :not(:first-child) - see example below:

.child-div {
  background: green;
  width: 30px;
  height: 30px;
  margin: 1rem;
}

.whatever {
  background: red;
  width: 30px;
  height: 30px;
  margin: 1rem;
}

.child-div:not(:first-child) {
  display: none;
}
<div class="parent-div">
  <div class="whatever"></div>
  <div class="child-div"></div>
  <div class="child-div"></div>
  <div class="child-div"></div>
  <div class="child-div"></div>
</div>

I was expecting ONE green square but that is not the case. All are hidden.

From this: css selector :first-child

The first-child applies to the li. It should select lis that are first children under any div.

From this: CSS selector for first element with class

the :first-child pseudo-class represents the very first child of its parent. That's it.

child-div are the only children in that parent div.

From this: not:first-child selector

If you need to support legacy browsers, or if you are hindered by the :not selector's limitation (it only accepts a simple selector as an argument) then you can use another technique:

MDN definition of a "simple selector":

A simple selector is either a type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class.

I am using a class:

<div class="child-div"></div>


.child-div:not(:first-child) {
  display: none;
}

Howcome I can't select everything except the first child in my example?

I also tried:

not:first-child selector

first-of-type - but had no luck

kawnah
  • 3,204
  • 8
  • 53
  • 103
  • 1
    **None** of your `.child-div` is a `:first-child`. – connexo Jun 25 '20 at 17:45
  • @connexo can you not use :first-child with class names? the first occurance of `.child-div` is under the `whatever` div, I would think that counts as a first child? – kawnah Jun 25 '20 at 17:47
  • 1
    No, there is no `:first-of-class` in CSS. What you want to do cannot be done in current CSS. `:first-child` only cares about what it says - if an element is the **first child** in its parent element. Combining it with a class (or any other selector) only restricts the matches found by `:first-child`. – connexo Jun 25 '20 at 18:12
  • :first-child refers to the position of tag in relation to siblings under one parent. I don't see any selector that can match what you wanted. The closest workaround is if the first class is always located as the second child, you can use .child-div:not(:nth-child(2)) instead – Va1iant Jun 26 '20 at 10:35

2 Answers2

2

You have to use the :not(:first-child) on the parent, because you're trying to target the children. There is no "first-child" of the children, because they are the children. I hope that makes sense ;)

.child-div {
  width: 100px;
  height: 30px;
  margin: 1rem;
}

.parent-div > :not(:first-child) {
  background: green;
}
<div class="parent-div">
  <div class="child-div">child-div</div>
  <div class="child-div">child-div</div>
  <div class="child-div">child-div</div>
  <div class="child-div">child-div</div>
  <div class="child-div">child-div</div>
</div>
Jos van Weesel
  • 2,128
  • 2
  • 12
  • 27
0

You are applying it in the wrong way, if I get it right you want to select other than the first child of your parent div so you should do this one :

Edited: I edited the post to match your comment request, it will select the all child-div class of your parent class except the first one. Good Luck.

.child-div {
  background: green;
  width: 30px;
  height: 30px;
  margin: 1rem;
}

/*
.parent-div div:not(:first-child) {
  display: none;
}
*/

.parent-div > .child-div ~ .child-div {
    display: none;
}
<div class="parent-div">
  <div class="whatever">Test1</div>
  <div class="child-div">Test2</div>
  <div class="child-div">Test3</div>
  <div class="child-div">Test4</div>
  <div class="child-div">Test5</div>
</div>
Ali Kianoor
  • 1,167
  • 9
  • 18