Why CSS selector :first-child:not(.ignore) doesn't exclude `ignore` class from selection?

Question

How can I use :first-child with :not(.ignore) in order to select every element that is the first child of its parent, unless that first child is of class ignore?

What I've tried: :first-child:not(.ignore){...},:first-child :not(.ignore){...}, I've also came across this answer, which is phrased as if it was what I am looking for, however the person asking didn't seem to understand how the :first-child selector works. Apart from that, one of the answers suggests that :first-child:not(.ignore){...} should work exactly as I expect it to, but for me it just doesn't.

My question is: Am I missing something with syntax or it is just not possible to combine selectors in this way?

:first-child:not(.ingore){
    background-color:lightblue;
}

<body >
        <div>
            <div>
                should be blue and is blue
            </div>
            <div>
                should also be blue as it's parent is blue due to being first child of 'body'
            </div>
        </div>
    
        <div>
            <div class="ignore">
                should not be blue but is blue 
            </div>
            <div>
                should not be blue and is not blue
            </div>
        </div>
 </body>

also be more specific becase `:first-child:not(.ingore)` will also select the body element and html one so the background will logically apply to everything — Temani Afif, Nov 09 '20 at 11:55
@TemaniAfif - The `body` element isn't a `:first-child`. The `head` element is its previous sibling. — Quentin, Nov 09 '20 at 11:55
@TemaniAfif — Even if we don't consider well formatted code. The parsing rules for HTML are very clear. — Quentin, Nov 09 '20 at 11:58

score 1 · Accepted Answer · answered Nov 09 '20 at 11:55

1

The first problem is that you made a spelling error. ingore and ignore don't match.

Aside from that, the html element matches your selector, and the default background-color for a div is transparent.

So the selector isn't matching the div and turning it blue, you can just see the blue background of the html element through it.

body :first-child:not(.ignore){
    background-color:lightblue;
}

<body>
  <div>
    <div>
      should be blue and is blue
    </div>
    <div>
      should also be blue as it's parent is blue due to being first child of 'body'
    </div>
  </div>

  <div>
    <div class="ignore">
      should not be blue but is blue
    </div>
    <div>
      should not be blue and is not blue
    </div>
  </div>
</body>

answered Nov 09 '20 at 11:55

Quentin

914,110
126
1,211
1,335

Thank you for your response, I am sorry that I didn't notice that spelling mistake. However, are you sure that everything that's inside ` ... ` matches `:first-child` selector? For me it seems like it only matches what's inside `` element anyways, so `body :first-child` seems redundant. Also, if `html` element matched my selector, the entire page would be blue, which is not the case – mikeskk Nov 11 '20 at 11:18
"However, are you sure that everything that's inside ` ... ` matches :first-child selector" — That isn't what I said. I said `` **itself** matches `:first-child` – Quentin Nov 11 '20 at 11:19
"For me it seems like it only matches what's inside `` element anyways" — It doesn't. That's the problem. – Quentin Nov 11 '20 at 11:19
"if html element matched my selector, the entire page would be blue, which is not the case" — The whole page **is** blue in the live demo in your question!! – Quentin Nov 11 '20 at 11:20
It's strange that the whole page is blue in my live demo for you, here is how it appears on my machine: [link](https://drive.google.com/file/d/1GeoaWPpnRZ9QkK-Ozl6fmHXwLzNdn4YV/view?usp=sharing). I.e. last line is not blue. – mikeskk Nov 11 '20 at 12:10

Why CSS selector :first-child:not(.ignore) doesn't exclude `ignore` class from selection?

1 Answers1