Select Element Without a Child

Get all elements without child node in jQuery

How about

$("span:not(:has(*))")

Selects all spans that have no children.

Explanation

The :has() selector "selects elements which contain at least one element that matches the specified selector." The wildcard * means all elements.

The expression $('div:has(p)') matches a <div> if a <p> exists
anywhere among its descendants, not just as a direct child.

The :not() selector "selects all elements that do not match the given selector."

In this case, :has() selects everything and then we use :not() to find the elements that don't match "everything"... in other words, nothing.

Demo

Select element without a child

You can't do it with a regular CSS selector, but you can do it in a few lines of JS:

var element = document.querySelector('#size');
var b = element.querySelector('b');
var text = b ? b.innerText : element.childNodes[0].nodeValue;

console.log(text);

How to select element without selecting children elements

You are applying styles to all divs, for differences it creates a class

.parent {  border: solid black 1px;}
.child {  border: solid green 1px}

<div class="parent">  <p>    Some Text  </p>  <div class="child">    <p>      Some Text    </p>  </div>  <p>    Some Text  </p></div>

How to select elements which do not have a specific child element with JQuery

You could try:

$("p:not(:has(>div))")

How can i select the parent element without child?

There are no parent selectors in CSS. Check:

Is there a CSS Parent selector?

Parent selectors in CSS

What you can do is styling both elements and then re-writing the style for the child. e.g.:

h1{
    color:blue;
}

h1 > span{
    color:black;
}

CSS select an element with no certain child element

css :not() not supported to select except "has element" but you can do it with jQuery

$('p').not(":has(img)").css('background-color', 'yellow')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><p>aa</p><p>aa</p><p>img<img src="" /></p><p>aa</p>

CSS selector: element without any its children

What you're not realising is that the [data-main] selector in your JSFiddle demo is selecting only that top-level li element. The problem you're facing here is that this li element contains the other li elements. Those aren't selected by this selector individually, but they are contained within the element which is selected:

If you want to style just the text held within the [data-main] element but not within the ul element contained within it, you'll need to override the [data-main] style declarations:

[data-main] {  color: red;}
[data-main] ul {  color: initial;}

<ul>  <li data-main>1 (must be selected)    <ul>      <li>1.1</li>      <li>1.2</li>    </ul>  </li>  <li>2</li></ul>

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.

CSS selector for label without child elements

One solution would be adding a class to the element and using CSS to format it accordingly.

label.empty {
white-space: nowrap;
}


Link to the documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors

The other comment points to using :empty but in your case the <label> contains some text and doesn't apply as empty

Select element only if it's not child of another element

Is it doable only with a selector...

Sadly not, no. There's no "select X but only if X is not a descendant of Y". (One is tempted by the :not pseudoclass, but it only allows simple selectors, not the compound kind we'd need for this.)

...or do I have to retrieve them all, check if the element is child of another element and then only set it to my property?

Yes, that's the approach you'll need to use.

---

Related Topics