Complex CSS selector for parent of active child
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>.
Apply style to parent if it has child with CSS
It's not possible with CSS3. There is a proposed CSS4 selector, $
, to do just that, which could look like this (Selecting the li
element):
ul $li ul.sub { ... }
See the list of CSS4 Selectors here.
As an alternative, with jQuery, a one-liner you could make use of would be this:
$('ul li:has(ul.sub)').addClass('has_sub');
You could then go ahead and style the li.has_sub
in your CSS.
Apply CSS styles to an element depending on its child elements
As far as I'm aware, styling a parent element based on the child element is not an available feature of CSS. You'll likely need scripting for this.
It'd be wonderful if you could do something like div[div.a]
or div:containing[div.a]
as you said, but this isn't possible.
You may want to consider looking at jQuery. Its selectors work very well with 'containing' types. You can select the div, based on its child contents and then apply a CSS class to the parent all in one line.
If you use jQuery, something along the lines of this would may work (untested but the theory is there):
$('div:has(div.a)').css('border', '1px solid red');
or
$('div:has(div.a)').addClass('redBorder');
combined with a CSS class:
.redBorder
{
border: 1px solid red;
}
Here's the documentation for the jQuery "has" selector.
Is there a CSS parent selector?
There is currently no way to select the parent of an element in CSS in a way that works across all browsers.
That said, the Selectors Level 4 Working Draft includes a :has()
pseudo-class that will provide this capability. It will be similar to the jQuery implementation.
li:has(> a.active) { /* styles to apply to the li tag */ }
As of 2022, it is only supported by Safari, and by Chromium browsers behind a flag.
In the meantime, you'll have to resort to JavaScript if you need to select a parent element with full cross-browser support.
Select parent selector when child is checked in SCSS/SASS
In this case, javascript would be more apropriated, since as of now we dont have a way to affect a parent element like this that works across all browsers.
Related Topics
Regular Expression For Extracting Tag Attributes
How to Make My Flexbox Layout Take 100% Vertical Space
How to Tell If a Browser Is in "Quirks" Mode
Setting Transform-Origin on Svg Group Not Working in Firefox
How to Disable Google Translate from HTML in Chrome
Problem with <Select> and :After with CSS in Webkit
How to Go Up a Level in the Src Path of a Url in HTML
Format HTML Table Cell So That Excel Formats as Text
How to Add a "Search" Button in a Text Input Field
Embed Image in a ≪Button≫ Element
Example of Multipart/Form-Data
How to Find Unused Images and CSS Styles in a Website
Curved Div With Transparent Top
What Values Can Appear in the "Selected" Attribute of the "Option" Tag
Make an HTML Svg Object Also a Clickable Link