Selecting an element with specific descendants using CSS3

Turbocapitalist · 02-12-2023, 12:26 AM

It's not quite programming but it is a puzzle. In the document below, I would like to have a CSS3 rule which puts A.0 and B.0 in bold type but leaves C.0 with a normal weight. The comments there show what I have tried but which does not work. Is there a way to do that in CSS3?

Code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Example</title>
<style type="text/css" media="screen">

 li { list-style: none; }
 li > ul > li.aok { font-weight: bold; }

/* li[ul>li.aok] { font-weight: bold; } */
/* li[li.aok] { font-weight: bold; } */
/* li[self::li ul li.aok] { font-weight: bold; } */
/* li[self::li li.aok] { font-weight: bold; } */
/* li[descendant::li.aok] { font-weight: bold; } */

/* CSS4 */
/* li:has(>ul>li.aok) { font-weight: bold; } */

</style>
</head>
<body>
 <ul>
  <li>A.0
   <ul>
    <li class="aok">AA.1</li>
    <li class="aok">AA.2</li>
   </ul>
  </li>
  <li>B.0
   <ul>
    <li class="aok">BB.1</li>
    <li class="notok">BB.2</li>
   </ul>
  </li>
  <li>C.0
   <ul>
    <li class="notok">CC.1</li>
    <li class="notok">CC.2</li>
   </ul>
  </li>
 </ul>
</body>
</html>

The proposed CSS4 may have the :has selector, but I'm looking for a way to do that in CSS3. Specifically I would like something which renders in both Firefox and Chromium.

PS. The above was blocked by LQ until javascript was activated. That is not a good move by LQ.

grail · 02-12-2023, 01:03 AM

Works as is for me???

I am using Chrome

Turbocapitalist · 02-12-2023, 01:38 AM

I wouldn't know about (or condone) Chrome, but :has() works in Chromium and not Firefox. It also works in the Chromium derivative Brave and thus presumably all the other Chromium derivatives.

However, as mentioned, a requirement is a solution that works in Firefox, too. I'd like to keep the logic for that in CSS3. I suppose it might be necessary to move it into the generator, but that would be more effort.

Turbocapitalist · 02-12-2023, 11:48 AM

I took a new look at the script which produces that HTML and adding two lines to it was sufficient to produce a work-around. The one line is just a for-loop iterating through an XPpath:

Code:

.//li[descendant::li[@class="ok"]]

That might be the more efficient method anyway.

dugan · 02-13-2023, 01:11 PM

I'm confused as to what you actually want to do here. Is it to have different handling for the last immediate child, as I'm getting from your description? If so, what are the classes for, and why are all your attempts trying to use them?

Turbocapitalist · 02-13-2023, 01:14 PM

Quote:

Originally Posted by dugan

The sample at the top looks exactly the same in Chrome and Firefox for me.

Which versions? For me, Firefox 109 ignores :has()

Code:

$ apt-cache policy firefox | head -n 3
firefox:
  Installed: 109.0.1+linuxmint1+vera
  Candidate: 109.0.1+linuxmint1+vera

dugan · 02-13-2023, 01:17 PM

I edited the post because I honestly wasn't sure if the code that worked (for you) in Chrome but not Firefox was active in the top post.

Is the requirement if it contains an unordered list with any list item that has a class of aok, then give it special styling?

Turbocapitalist · 02-13-2023, 01:46 PM

The sample makes a nested list two levels deep. The initial levels of the list A.0, B.0, and C.0 should reflect the presence of any descendant list item with the class of "aok". So elements containing A.0 and B.0 should end up rendered as bold text while C.0 should not be.

dugan · 02-13-2023, 01:49 PM

While you're waiting for :has support:

Add a class to either C0 or to A0 and B0.

And if you can't then do it with Javascript.

I'm saying this after looking at, well, what I'm sure you looked at:

https://stackoverflow.com/questions/...arent-selector

Turbocapitalist · 02-13-2023, 01:50 PM

Quote:

Originally Posted by dugan

While you're waiting for :has support:

Add a class to either C0 or to A0 and B0.

That's what I've ended up doing in #4 above. By luck it took only two lines.

dugan · 02-13-2023, 01:52 PM

Good lord...

https://bugzilla.mozilla.org/show_bug.cgi?id=418039