Selecting an Element That Doesn't Have a Child with a Certain Class

Is it possible to select elements that do not have a child of a certain type?

There is a spec, currently in draft, for a :has() pseudo-class. No browser supports it yet. If the spec is someday approved and implemented, you'd be able to do this:

a:not(:has(img)) {
    // Styles
}

The MDN page says that :has would never work in stylesheets, only in JavaScript; but in saying that, it links to a section of the spec about a "dynamic selector profile" that apparently no longer exists.

I think the browser vendors typically have a problem with implementing CSS features that require knowledge of the DOM that only exists after the selected element is created, so I don't know if we should get our hopes up for this. Someone who follows the mailing lists or is generally smarter than me might offer a better prognosis.

How to select all elements, which do NOT have a child with a certain class?

You can also use filter() method to achieve this,

element.all(by.css(".card")).filter(function(cardElement){
    return cardElement.all(by.css(".sold-overlay")).count().then(function(count){
        return count == 0;
    });
});

How can I select an element which does not contain a certain child element?

$('.test:not(:has(.example))')

-or-

$('.test').not(':has(.example)')

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>

jQuery Selectors - where item does not have children with a certain class

You'll need to use jQuery's filter function:

$('#nav > li').filter(function() { return !($(this).children().is('.active')); })

Select only elements that don't have a parent with defined class

I don't think you can use combinator selectors with :not as stated in the documentation:

This selector only applies to one element; you cannot use it to
exclude all ancestors. For instance, body :not(table) a will still
apply to links inside of a table, since <tr> will match with the
:not() part of the selector.

You could try something like this:

div {  background-color: red;  padding: 5px;}
.child {  background-color: green;  padding: 5px;}
.dontSelect .child {  background-color: initial;}

<div>  <div class="child">    Select this  </div>  <div class="dontSelect">    <div>      <div class="child">        Don't select this      </div>    </div>  </div></div>

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.

---

Related Topics