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.
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[]*/
html - Correct use of CSS :not selector for excluding element when in particular container - Stack Overflow
"CSS id selector `x` not found."
Why my class selector wont work? i stayed literally 40min trying everything
CSS Selector :not() - not working in querySelector
Videos
You can try this:
h2 {...}
.block h2 {...}
I am trying to apply some styling that should affect most
h2elements, but noth2elements which appear within a div with the classblock.
You haven't indicated the level where the h2 exists within the div. So here are a few options, if you want to use the :not() pseudo-class.
If the h2 is one level in:
div:not(.block) h2 {
color: red;
}<div class="block">
<h2>with block class</h2>
</div>
<div>
<h2>without block class</h2>
</div>If the h2 is two levels in:
div:not(.block) div h2 {
color: red;
}<div class="block">
<div>
<h2>with block class</h2>
</div>
</div>
<div>
<div>
<h2>without block class</h2>
</div>
</div>If the h2 is three levels in:
div:not(.block) div div h2 {
color: red;
}<div class="block">
<div>
<div>
<h2>with block class</h2>
</div>
</div>
</div>
<div>
<div>
<div>
<h2>without block class</h2>
</div>
</div>
</div>and so on...
Also keep in mind that :not(), as it currently exists in most browsers, only accepts simple selectors as an argument.
Your example...
h2:not(.block h2) {
~styling for main h2 elements~
}
... will fail in most browsers because the argument contains a complex selector (created by a descendant combinator, in this case).
More details here: https://stackoverflow.com/a/37305971/3597276