How to Select Element That Does Not Have Specific Class

How to Select Element That Does Not have Specific Class

This selects the second LI element.

document.querySelector("li:not([class])")

or

document.querySelector("li:not(.completed):not(.selected)")

Example:

// select li which doesn't have a 'class' attribute...console.log(document.querySelector("li:not([class])"))
// select li which doesn't have a '.completed' and a '.selected' class...console.log(document.querySelector("li:not(.completed):not(.selected)"))

 <ul id="tasks">    <li class="completed selected">One Task</li>    <li>Two Task</li>  </ul>

How to select an element which doesn't have a specific class name, using jQuery?

$('a:not(.active)')

should work

---

yours works as well. just tested:
http://jsfiddle.net/UP6a7/

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' />

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.

jQuery select elements that do not contain a class

To do it just with a selector, you'd use :not with :has:

$(".hi:not(:has(.image))")
// or to be more specific:
$(".hi:not(:has(.hue > .image))")

Note that :has is jQuery-specific.

To do it with filter, you could use find in the callback:

$(".hi").filter(function() { return $(this).find(".image").length == 0; })
// or to be more specific:
$(".hi").filter(function() { return $(this).find(".hue > .image").length == 0; })

CSS: How to select all links ( a ) that do not have a certain class?

You need to use the pseudo class not() as per the MDN docs not() CSS psuedo class

The not() pseudo class requires a comma-separated list of one or more selectors as its argument (i.e. what goes inside the brackets).

In your example where you want all of the links except the one with the class .hamburger it would be:

a:not(.hamburger)

How can I select all elements without a given class in jQuery?

You can use the .not() method or :not() selector

Code based on your example:

$("ul#list li").not(".active") // not method
$("ul#list li:not(.active)")   // not selector

How can I select elements that don't have any of several classes using jQuery?

this should do it:

$('div.everyDiv:not(.hide1, .hide2, .hide3)').hide();

http://jsfiddle.net/s9uyk/

as per comments: making it a little more obvious what the fiddle is doing:
not it adds a class to all the ones that DON'T Have any of the hide classes.
http://jsfiddle.net/s9uyk/2/

Not class selector in jQuery

You need the :not() selector:

$('div[class^="first-"]:not(.first-bar)')

or, alternatively, the .not() method:

$('div[class^="first-"]').not('.first-bar');

jquery - select an element if children not having a specific class

I wander why if I do $('.parentClass:has(".childrenClass")'), it returns elements if one of their children has .childrenClass but if I do $('.parentClass:not(".childrenClass")') it returns all elements even if one of their children has .childrenClass

Because :not(".childrenClass") is not remotely the opposite of :has(".childrenClass"). :not tests whether that element doesn't match the selector. :has tests whether that element's children match the selector.

Is there a way to select element only if all of their children have not a specific class?

Yes, you can combine :not and :has:

$(".parentClass:not(:has(.childrenClass))").css("background-color", "yellow");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><div class="parentClass">  Should match, no children with childrenClass</div><div class="parentClass">  Should match,  <span>no children with childrenClass</span></div><div class="parentClass">  Shouldn't match,  <span class="childrenClass">has children with childrenClass</span></div><div class="parentClass">  Shouldn't match,  <span class="childrenClass">has children</span>  <span class="childrenClass">with childrenClass</span></div>

---

Related Topics