How to Write a CSS Selector Selecting Elements Not Having a Certain Class or Attribute

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.

Sample Image

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:

Railroad diagram of what text is allowed in the attribute selector

Railroad diagram of what string is allowed in the attribute selector

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: