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.
How to write a CSS Selector selecting elements NOT having a certain attribute?
I think more accurate CSS Selector is:
div[class]:not([style])>button
because the button
element is a child of div
element.
Hope it helps you!
Is there a CSS selector for element without any class?
With section:not([class])
you select every section without the class attribute. Unfortunately, it won't select those sections with an empty class attribute value. So in addition, we have to exclude these sections:
section:not([class]) { /* every section without class - but won't select Section C */
color: red;
}
section[class=""] { /* selects only Section C */
font-weight: bold;
}
<section>Section A</section>
<section class="special">Section B</section>
<section class="">Section C</section>
How to select element that does not contain class
Check Your Syntax
Ensure that your class attribute selector is contained within square braces to avoid any syntax issues.:
input:not([class^="border-radius"]) {
/* Your style here */
}
Handling Multiple Classes
Additionally, if you expect to contain multiple classes, you might want to consider using the contains selector *=
instead as the previous approach will only work if the first class attribute starts with "border-radius" :
input:not([class*="border-radius"]) {
/* Your style here */
}
Examples
This is an example demonstrating the starts-with ^=
selector.
input { margin: 10px}
input:not([class^="border-radius"]) { background: yellow;}
<input class='border-radius' /><input class='normal' /><input class='test border-radius' /><input class='another-normal' /><input class='border-radius-5' />
How can I select elements that have no class?
Use the :not()
selector with an attribute selector to find elements that don't have a class
.
i:not([class]) {
...
}
CSS selector for not having classes
You can use as many :not()
selectors as you like.
:not(.foo):not(.bar)
Target elements without *any* attributes?
A selector that matches a tag without attributes doesn't currently exist.
I read through the latest CSS selector reference and couldn't find a selector that does what you wish.
You can't use an asterisk in the attribute selector to select everything unfortunately. These two railroad diagrams represent what is allowed:
So your first two attempts are invalid, and the valid empty string seems to have no effect:
[] {
color: blue;
}
[*] {
color: red;
}
[""] { /* Seems to select nothing, rather than 'no attribute' */
color: magenta;
}
<p>Clean element with no attributes</p>
<p class="has-class">Has class attribute</p>
<p id="has-id">Has ID attribute</p>
<p data-has-data-attribute="">Has data attribute</p>
css selector to match an element without attribute x
:not
selector:
input:not([type]), input[type='text'], input[type='password'] {
/* style here */
}
Support: in Internet Explorer 9 and higher
CSS selector based on ancestors not having a class
div:not(.evil-class) .element
means "Something with the class element that is descended from a div which does not have the class evil-class"
Your element is not descended from any div, so div:not(.evil-class)
doesn't match any of the ancestors (which are only <body>
and <html>
in this case).
There is currently no way to express "None of the ancestors have a specific class" in CSS.
Selectors Level 4 proposes allowing :not()
to contain complex selectors so in the future you may be able to do something like:
.element:not(div.evil-class *) { background-color: green;}
<div class="evil-class"> <div class="element">An element within the evil class</div></div>
<div class="element">An element NOT in the evil class</div>
Related Topics
Last Margin/Padding Collapsing in Flexbox/Grid Layout
Keep the Middle Item Centered When Side Items Have Different Widths
Equal Height Children of Flex Items
How to Force a Line Break in a Long Word in a Div
Using HTML and Local Images Within Uiwebview
How to Get a Div to Float to the Bottom of Its Container
Difference Between ≪Section≫ and ≪Div≫
Properly Sizing and Aligning the Flex Item(S) on the Last Row
Font Awesome 5 on Pseudo Elements Shows Square Instead of Icon
Why Are My Css3 Media Queries Not Working on Mobile Devices
Trouble With Content Security Policy
Display: Inline-Block Extra Margin
How to Get HTML 5 Input Type="Date" Working in Firefox And/Or Ie 10