CODEWITHSUNDEEP
csscss-selectors
Janva
Janva

Reputation: 55

:not selector doesn't work as expected

So I have this:

b:not(.alert-danger) {
  color: #fff;
}
<div class="alert alert-danger" role="alert">
  <h3><b>text</b></h3>
</div>

<h3><b>text2</b></h3>

The thing is that the alert (text) gets white and I don't understand what's happening. text2 also gets white but that's ok.

I just want to make effect on text2, not text1.

Upvotes: 1

Views: 109

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 372149

:not(.alert-danger) > h3 {
  color: #fff
}
<div class="alert alert-danger" role="alert">
  <h3><b>text</b></h3>
</div>
<h3><b>text2</b></h3>

Your selector:

b:not(.alert-danger) { color: #fff; }

...is saying:

Target b elements unless they have a class of alert-danger.

This doesn't match your HTML structure. Plus you can't have a child matching on a parent, because that's not how CSS works.

The revised selector is saying:

Target h3 elements that are children of any element, unless that parent has a class of alert-danger.

You can also target the b if you prefer:

:not(.alert-danger) b { color: #fff }

Upvotes: 3

Related Questions