Selecting parent to use `:not()` operator without child element is possible?

Question

I am trying to apply color only parent level, by using :not() operator. but no result. is it possible?

html:

<header>title <span>123</span></header>

CSS:

header:not(header span){
  color: green;
}

<header>title <span>123</span></header>

header:not(header span){
  color: green;
}

Your selector is targeting `header` not `span`, so `header` will either be green, or not. You need a second rule for `span`. — sallf, Apr 01 '21 at 03:25

score 0 · Answer 1 · answered Apr 01 '21 at 03:24

0

I would use two css rules, one specifically targeting the span to unset the color: green rule applied by the header css rule.

header {
  color: green;
}

header span {
  color: initial;
}

<header>title <span>123</span></header>

answered Apr 01 '21 at 03:24

camaulay

1 Answers1