Selecting an Element That Has a Specific Child

CSS selector - element with a given child

Is it possible to select an element if it contains a specific child element?

Unfortunately not yet.

The CSS2 and CSS3 selector specifications do not allow for any sort of parent selection.

---

A Note About Specification Changes

This is a disclaimer about the accuracy of this post from this point onward. Parent selectors in CSS have been discussed for many years. As no consensus has been found, changes keep happening. I will attempt to keep this answer up-to-date, however be aware that there may be inaccuracies due to changes in the specifications.

---

An older "Selectors Level 4 Working Draft" described a feature which was the ability to specify the "subject" of a selector. This feature has been dropped and will not be available for CSS implementations.

The subject was going to be the element in the selector chain that would have styles applied to it.

_{Example HTML}

<p><span>lorem</span> ipsum dolor sit amet</p>
<p>consecteture edipsing elit</p>

This selector would style the span element

p span {
    color: red;
}

This selector would style the p element

!p span {
    color: red;
}

---

A more recent "Selectors Level 4 Editor’s Draft" includes "The Relational Pseudo-class: :has()"

:has() would allow an author to select an element based on its contents. My understanding is it was chosen to provide compatibility with jQuery's custom :has() pseudo-selector*.

In any event, continuing the example from above, to select the p element that contains a span one could use:

p:has(span) {
    color: red;
}

---

_{* This makes me wonder if jQuery had implemented selector subjects whether subjects would have remained in the specification.}

Selecting an element that has a specific child?

No, CSS does not allow you to select elements based on their descendants.

select elements by class that have a specific child element with javascript

use this:

itemClass[i].getElementsByClassName
insideItemClass[i].style.display = "none"; 

instead of

itemClass.getElementsByClassName
insideItemClass.style.display = "none";

Full code:

    var itemClass = document.getElementsByClassName("www-components-menu-product-list--item_DgfZL");

for (i = 0; i < itemClass.length; i++) {

      var insideItemClass = itemClass[i].getElementsByClassName("www-components-product-card--hybrid_2AD7v");

      if(insideItemClass.length > 0){
        itemClass.item(i).style.display = "none";
      }
}

Here is the fiddle: https://jsfiddle.net/jeL0fezh/8/

Finding child element of parent with JavaScript

The children property returns an array of elements, like so:

parent = document.querySelector('.parent');
children = parent.children; // [<div class="child1">]

There are alternatives to querySelector, like document.getElementsByClassName('parent')[0] if you so desire.

---

Edit: Now that I think about it, you could just use querySelectorAll to get decendents of parent having a class name of child1:

children = document.querySelectorAll('.parent .child1');

The difference between qS and qSA is that the latter returns all elements matching the selector, while the former only returns the first such element.

XPath how to select an element where the following sibling has an specific child?

Your first try was close, but it was checking if <p> has any following-siblings named <p> which have a child named <br>. But I guess that you really wanted to check if the first following-sibling named <p> has a child named <br> instead.

So use

//p[contains(., 'text') and following-sibling::p[1][br]]

To get the element only if <br> is the first child, you can use this extended expression

//p[contains(., 'text') and following-sibling::p[1][*[self::br and position()=1]]]

To satisfy your second requirement that <br> can be at any descendant level and not only a direct child, you can use

//p[contains(., 'text') and following-sibling::p[1][descendant-or-self::br]]

How to check if an element has a specific child?

Given references to two elements, you can test if one is the child of the other by using the .parentElement property as follows:

if (child1.parentElement === parent1) {
  // do something
}

So in your specific case where you've said the parent is the body, you can do this:

    var child1 = document.createElement('div');    var child2 = document.createElement('div');    document.body.appendChild(child1); // note we only append one
    if (child1.parentElement === document.body) {      console.log("child1 is a child of the body"); // this will run    }    if (child2.parentElement === document.body) {      console.log("child2 is a child of the body"); // this won't run    }

---

Related Topics