Can I write a CSS selector selecting elements NOT having a certain class or attribute?
Typically you add a class selector to the :not()
pseudo-class like so:
:not(.printable) {
/* Styles */
}
:not([attribute]) {
/* Styles */
}
But if you need better browser support (IE8 and older don't support :not()
), you're probably better off creating style rules for elements that do have the "printable" class. If even that isn't feasible despite what you say about your actual markup, you may have to work your markup around that limitation.
Keep in mind that, depending on the properties you're setting in this rule, some of them may either be inherited by descendants that are .printable
, or otherwise affect them one way or another. For example, although display
is not inherited, setting display: none
on a :not(.printable)
will prevent it and all of its descendants from displaying, since it removes the element and its subtree from layout completely. You can often get around this by using visibility: hidden
instead which will allow visible descendants to show, but the hidden elements will still affect layout as they originally did. In short, just be careful.
:not([class])
Actually, this will select anything that does not have a css class (class="css-selector"
) applied to it.
I made a jsfiddle demo
h2 {color:#fff}
:not([class]) {color:red;background-color:blue}
.fake-class {color:green}
<h2 class="fake-class">fake-class will be green</h2>
<h2 class="">empty class SHOULD be white</h2>
<h2>no class should be red</h2>
<h2 class="fake-clas2s">fake-class2 SHOULD be white</h2>
<h2 class="">empty class2 SHOULD be white</h2>
<h2>no class2 SHOULD be red</h2>
Is this supported? Yes : Caniuse.com (accessed 02 Jan 2020):
- Support: 98.74%
- Partial support: 0.1%
- Total:98.84%
Funny edit, I was Googling for the opposite of :not. CSS negation?
selector[class] /* the oposite of :not[]*/
The :not
negation pseudo class
The negation CSS pseudo-class,
:not(X)
, is a functional notation taking a simple selector X as an argument. It matches an element that is not represented by the argument. X must not contain another negation selector.
You can use :not
to exclude any subset of matched elements, ordered as you would normal CSS selectors.
Simple example: excluding by class
div:not(.class)
Would select all div
elements without the class .class
div:not(.class) {
color: red;
}
<div>Make me red!</div>
<div class="class">...but not me...</div>
Complex example: excluding by type / hierarchy
:not(div) > div
Would select all div
elements which arent children of another div
div {
color: black
}
:not(div) > div {
color: red;
}
<div>Make me red!</div>
<div>
<div>...but not me...</div>
</div>
Complex example: chaining pseudo selectors
With the notable exception of not being able to chain/nest :not
selectors and pseudo elements, you can use in conjunction with other pseudo selectors.
div {
color: black
}
:not(:nth-child(2)){
color: red;
}
<div>
<div>Make me red!</div>
<div>...but not me...</div>
</div>
Browser Support, etc.
:not
is a CSS3 level selector, the main exception in terms of support is that it is IE9+
The spec also makes an interesting point:
the
:not()
pseudo allows useless selectors to be written. For instance:not(*|*)
, which represents no element at all, orfoo:not(bar)
, which is equivalent tofoo
but with a higher specificity.