CSS Selector for a Child Element Whose Parent Element Has a Certain Class

CSS selector for a child element whose parent element has a certain class

To select strong elements that are descendants of an element with class commandBar, use the descendant combinator along with a class selector:

.commandBar strong

In order to only select direct children strong elements, use the child combinator, >:

.commandBar > strong

Depending on your markup, you may also want to specify the element type that has the class .commandBar (in this case, div):

div.commandBar strong

Complex CSS selector for parent of active child

You can use has():

li:has(a:active) {
  /* ... */
}

~~Unfortunately, there's no way to do that with CSS.~~

~~It's not very difficult with JavaScript though:~~

// JavaScript code:
document.getElementsByClassName("active")[0].parentNode;

// jQuery code:
$('.active').parent().get(0); // This would be the <a>'s parent <li>.

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.}

CSS selector to exclude all children where any parent at ANY LEVEL has a class

Find all the elements (all), then the elements with no-material on the element or its parent (no), then remove those in the second from those in the first to find those that remain (yes).

const difference = (a, b) => a.filter(elt => b.indexOf(elt) === -1);  const all = document.querySelectorAll("input");const no = document.querySelectorAll(".no-material input, input.no-material");
const yes = difference([...all], [...no]);
console.log(yes.map(elt => elt.name));

<main style="display: none;">
  <!-- Not selectable -->  <div class="no-material">    <input name="no-1">  </div>
  <div>    <input name="no-2" class="no-material">  </div>
  <div>    <label class="no-material">      <input name="no-3">    </label>  </div>
  <div>    <label class="no-material">      <span>        <input name="no-4">      </span>    </label>  </div>
  <div>    <label>      <span class="no-material">        <input name="no-5">      </span>    </label>  </div>
  <!-- Selectable -->  <div>    <input name="yes-1">  </div>
  <div>    <input name="yes-2">  </div>
  <div>    <label>      <input name="yes-3">    </label>  </div>
  <div>    <label>      <span>        <input name="yes-4">      </span>    </label>  </div>
  <div>    <label>      <span>        <input name="yes-5">      </span>    </label>  </div>
</main>

Selecting an element that has a specific child?

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

Is there a CSS parent selector?

The Selectors Level 4 Working Draft includes a :has() pseudo-class that will provide this capability. It will be similar to the jQuery implementation, but is currently not supported by Firefox.

li:has(> a.active) { /* styles to apply to the li tag */ }

As of 2022, Firefox is the only browser not supporting it by default.

In the meantime, you'll have to resort to JavaScript in Firefox if you need to select a parent element with full cross-browser support.

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>

how to style only child element of specific class whose parent also is of specific class

What you're looking for is:

.tabs-outer li.selected { ... }

Note that li.selected has no space between the two selectors, making it target any li element that also has the selected class.

If you want to get really specific you can do the same with the div:

div.tabs-outer li.selected { ... }

Hope this helps!

How to select children of elements with a shared base class and an additional class?

You can think about this differently and target all the elements then reset the style where only the banner class is present but you need to pay attention to whitespace in the class attribute:

.banner {  color:red;}
[class="banner"] {  color:blue;}

<div class="banner"><p>Header</p></div><div class="banner customer-service"><p>Specific Header</p></div><div class="banner early-talent"><p>Other Specific Header</p></div>

<div class="banner "><p>I will be red!!!</p></div>

CSS Selector for a Child Element Whose Parent Element Has a Certain Class