Select all class inside a class but not a specific class-CodePudding

I need to use a specific font for all elements but one class inside the most outer parent. Currently my code looks like this:

.foo *:not(.bar) {
  font-family: sans-serif;
}

<span >
  <a href="https://example.com"><span >Lorem</span></a>
  <a href="https://example.org"><span >ipsum</span></a>
  <span > dolor</span>
  <span > sit amet.</span>
</span>

Now, I want Lorem to stay as is, while applying the font to everything else. How can I do that?

CodePudding user response：

Adding the general sibling combinator ~ does the trick.

.foo :not(.bar) ~ * {
  font-family: sans-serif;
}

<span >
  <a href="https://example.com"><span >Lorem</span></a>
  <a href="https://example.org"><span >ipsum</span></a>
  <span > dolor</span>
  <span > sit amet.</span>
</span>

But because :not is not supported in older browsers, i would recommend the following method (as mentioned by @m4n0), unless you don't need to support those.

.foo * {
  font-family: sans-serif;
}
.foo .bar {
  font-family: initial;
}

<span >
  <a href="https://example.com"><span >Lorem</span></a>
  <a href="https://example.org"><span >ipsum</span></a>
  <span > dolor</span>
  <span > sit amet.</span>
</span>