Exclude a class from all of the selectors in CSS

Question

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;
}

Just set a specific rule for .exclude elements that's overriding default rule applied to all elements — A. Wolff
– A. Wolff, Commented May 9, 2021 at 9:49
Is there a reason you couldn't use :not(.exclude) just by itself? Do you have any specific .exclude elements that you want to, ahem, exclude from this rule? — BoltClock
– BoltClock, Commented May 9, 2021 at 14:32

m4n0 · Accepted Answer · 2021-05-09 10:02:03Z

4

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>

edited May 9, 2021 at 10:02

answered May 9, 2021 at 9:50

m4n0

32.6k28 gold badges81 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

A Haworth · Accepted Answer · 2021-05-09 10:13:16Z

1

*: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.

answered May 9, 2021 at 10:13

A Haworth

37.6k4 gold badges17 silver badges17 bronze badges

1 Comment

BoltClock Over a year ago

Listing all of the element types they want to apply :not(.exclude) to seems to suggest that there are element types they don't want this negation to apply to. It seems like it'd be easier for them to add a second :not() that excludes just that selection of element types, rather than listing out all the ones they do want it to apply to. However if they just want to apply this negation to all elements, then this answer is the way to go.

Collectives™ on Stack Overflow

Exclude a class from all of the selectors in CSS

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related