Exclude a class from all of the selectors in CSS

user_14182190 0
Viewed 517

First of all sorry for my bad English. I want to exclude a class from all of the selectors in CSS.

I need to use something like

(h1, h2, h3, h4, ..., p, span, a, ...):not(.exclude){
   font-family: arial;
}

instead of:

h1:not(.exclude), h2:not(.exclude), ..., a:not(.exclude){
   font-family: arial;
}
css-selectors css html
2 Answers

It is possible with CSS4 :is selector. You can watch out for the browser support here: https://caniuse.com/?search=is but in modern web developer terms, you are safe to use it.

:is(h1,h2,h3):not(.exclude) {
  background: #bada55;
  color: #565656;
  padding: 10px;
}
<h1 class="exclude">
  Excluded
</h1>
<h2 class="include">
  Included
</h2>
<h3 class="exclude">
  Excluded
</h3>

The above code works like this

h1:not(.exclude), h2:not(.exclude), h3:not(.exclude) { Properties... }

You can also make use of :where which does the same:

:where(h1,h2,h3):not(.exclude) {
  background: #bada55;
  color: #565656;
  padding: 10px;
}
<h1 class="exclude">
  Excluded
</h1>
<h2 class="include">
  Included
</h2>
<h3 class="exclude">
  Excluded
</h3>

user_48139130 
*:not(.exclude) {
  font-family: arial;
}

would give everything font family arial except elements with class .exclude, but I'm not sure if that's what you mean.

user_108674540
Related