Select element based on child class
This isn't possible with css, since you're working against the cascade by selecting an ancestor based on a descendant.
The best I can offer and suggest is a jQuery approach:
$(document).ready(
function() {
$('.givenClassName').parent().addClass('something');
}
);
This finds the element with the givenClassName
and then selects its parent element and adds the class something
to that element.
@Blaenk suggests an alternate approach, which is more versatile (his approach doesn't require the ancestor element to be the parent of the element you're selecting by).
Obviously other JS libraries, and JS all by itself, can achieve the same effect, though I can't offer particular advice, since I'm still only just familiarising myself with JS and mostly with jQuery (why yes, I am ashamed of myself...).
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 select element with particular child element attribute
I tried your complex selector in CSS, plain JS and using the jQuery lib... Guess who wins!
// Checking if JS handles that selector....
// Let's have the selector in a variable, just to make sure the same is tried in both cases...
let ourSelector = ".wp-block-image figure.alignright:has(img:not([src*='triangle']))"
// JS querySelector
try{
document.querySelector(ourSelector).style.border = "3px solid blue";
}
catch(error){
console.log(error.message);
}
// jQuery! (--WORKS--)
$(ourSelector).css("border", "3px solid blue");
/* This rule applies */
.wp-block-image figure.alignright img:not([src*="triangle"]) {
border: 3px solid red;
}
/* This one not */
.wp-block-image figure.alignright:has(img:not([src*="triangle"])) {
opacity: 0.2;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wp-block-image">
<figure class="alignright">
<img width="387" height="500" src="https://via.placeholder.com/300x300.jpg?text=triangle" />
</figure>
<figure class="alignright">
<img width="387" height="500" src="https://via.placeholder.com/300x300?text=square" />
</figure>
</div>
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
Selecting an element that has a specific child?
No, CSS does not allow you to select elements based on their descendants.
How do you select a parent element based on the text of it's child element WITHOUT jQuery?
You can use .querySelectorAll()
, for..of
loop, check .textContent
of current label
element, call ChildNode.remove()
on .parentElement
if match is found, break
loop
for (let label of document.querySelectorAll(".BreadBasket .BreadSpec > label")) { if (label.textContent === "lefse") { label.parentElement.remove(); break; }}
<div class="BreadBasket"> <ul> <li class="BreadSpec"> <label>brioche</label> <span>01</span> </li> <li class="BreadSpec"> <label>focaccia</label> <span>02</span> </li> <li class="BreadSpec"> <label>naan</label> <span>03</span> </li> <li class="BreadSpec"> <label>lefse</label> <span>04</span> </li> <li class="BreadSpec"> <label>tandoor</label> <span>05</span> </li> <li class="BreadSpec"> <label>tortilla</label> <span>06</span> </li> </ul>
CSS select element with class, only if it is NOT first child of parent
Using the :not
and :first-child
selectors should do it.
.special:not(:first-child) {}
Related Topics
Named CSS Grid Lines with SCSS
Css-Selector for When a HTML-Document Is Inside an Iframe
What Does "A" Stand for in Font: 0/0 A;
What Is the Third Value in CSS Padding
React Native Font Outline/Textshadow
Last-Child and Last-Of-Type Not Working in SASS
Strange Underlines in Font-Awesome CSS
Ie 10's -Ms-Clear Pseudo-Element, and Ie5 Quirks Mode
How to Properly Mix Bootstrap and Bem
How to Use a Background Image on the Stroke of an Svg Element
Sass Loop to Output Classes with Unique Number and Background-Image
How to Center the Center Circle
CSS Wild Card for Complex Id'S
How to Override Opacity for a Child
Why Doesn't Max-Width Override Min-Width