I’m trying to highlight a table row where one of the cells contains

So my:

tbody.plugins tr td.plugin-title p img[src*=”pluginname”] { background-color: var(–postpone-update-alert) !important; }

Needs to become something like:

tbody.plugins tr:has(td.plugin-title p img[src*=”pluginname”]) { background-color: var(–postpone-update-alert) !important; }

as I want to apply the highlighting to the entire row but that doesn’t work…

Is it possible at all? Or am I just overlooking something?

div:has(p) – “color” is used for all content of this “div” – but only if this “div” contains “p” tag.

div p – “color” is used only in “p” tags in “div”.

What is the difference with two things:

div:has(p) {color: #000}
div p {color: #000}

Why should I use :has() selector?

div:has(:focus) {}
div:has(:hover) {}
div:has(:target) {}

No?

It will be possible when :has() is supported, yeah.

A:has(B.red) { ... }
A:has(B.green) { ... }
A:has(B.blue) { ... }

We have parent element A
and within it, we have child element B

<A>
<B></B>
</A>
<A>
<B></B>
</A>
<A>
<B></B>
</A>

Each element B gets a class in which its background color is for example, so the code looks like this :

<A>
<B class="red"></B>
</A>
<A>
<B class="green"></B>
</A>
<A>
<B class="blue"></B>
</A>

My question is, is it possible to set the background color of parent element A in relation to the background color of its child element B ???

TNX :)

won’t be able to come until we find a workaround for the cyclical referencing issue

Which is something I never fully understood – couldn’t we just let the developers take care of resolving those? After all, it works for other stupid mistakes where we may shoot ourselves in the foot, e. g. p:hover {transform: scale(0.9)} may result in some jittery business along the edges, but that is for us devs to take care of.

yes dude

:how() would that work?

body:has(.printarea) {
    // Content creator has provide a div with a class of "ptintarea" they want printed.  Hide everything else.
}

Currently, the only way to check for this is to use JS. A clean way to do it in CSS would be lovely!

Plenty of other fantastic possibilities too!

Do we know if it will nest?
div:has(a:has(img)) ???
Ick… that’s not great for readability though.

These are regular CSS selector combinators. You can find them all over at MDN and read more about them at CSS tricks :-)