LinuxQuestions.org - CSS :has() not working to select pseudo-class :link

- Programming (https://www.linuxquestions.org/questions/programming-9/)

- - CSS :has() not working to select pseudo-class :link (https://www.linuxquestions.org/questions/programming-9/css-has-not-working-to-select-pseudo-class-link-4175735272/)

CSS :has() not working to select pseudo-class :link

I can see that the :has() selector in CSS can work with pseudo-clases, as exhibited with the :hover pseudo-class:

Code:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

  <title>Test Hover</title>

  <style type="text/css" media="screen">

  /*<![CDATA[*/

    div {

    background-color: #f88;

    }

    div:has(ul li a:hover) {

    background-color: #88f;

    }

  /*]]>*/

  </style>

</head>

<body>

  <h1>Hover</h1>

  <div>

    <ul>

      <li> <a href="http://127.0.0.1/a">A</a> (visited) </li>

      <li> <a href="http://127.0.0.1/b">B</a> (visited) </li>

      <li> <a href="http://127.0.0.1/c">C</a> (visited) </li>

    </ul>

  </div>

  <div>

    <ul>

      <li> <a href="http://127.0.0.1/d">D</a> (not visted) </li>

      <li> <a href="http://127.0.0.1/e">E</a> (not visted) </li>

      <li> <a href="http://127.0.0.1/f">F</a> (not visted) </li>

    </ul>

  </div>

</body>

</html>

However, the problem I am running into is that neither Firefox nor Chromium allow the same selection of the :link pseudo-class:

Code:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

  <title>Test Link</title>

  <style type="text/css" media="screen">

  /*<![CDATA[*/

    div {

    background-color: #f88;

    }

    div:has(ul li a:link) {

    background-color: #88f;

    }

  /*]]>*/

  </style>

</head>

<body>

  <div>

    <h1>Link</h1>

    <ul>

      <li> <a href="http://127.0.0.1/a">A</a> (visited) </li>

      <li> <a href="http://127.0.0.1/b">B</a> (visited) </li>

      <li> <a href="http://127.0.0.1/c">C</a> (visited) </li>

    </ul>

  </div>

  <div>

    <ul>

      <li> <a href="http://127.0.0.1/d">D</a> (not visted) </li>

      <li> <a href="http://127.0.0.1/e">E</a> (not visted) </li>

      <li> <a href="http://127.0.0.1/f">F</a> (not visted) </li>

    </ul>

  </div>

</body>

</html>

The above tests assume that the links are either visited or not visited as according to their annotation.

While the document with :hover allows for the background to change for the parent div when a child anchor is hovered over, the same cannot be said for document with the div with child anchors pointing to unvisited links. The div with visited and unvisted links are getting treated the same by CSS. I would have expected the background to change for the div with the unvisited links.

Is this a flaw in both Chromium and Firefox? Or have I misunderstood how to use :has() in CSS?

Code:

$ apt-cache policy firefox | head -n 2

firefox:

  Installed: 124.0.1+linuxmint1+virginia



$ apt-cache policy chromium | head -n 2

chromium:

  Installed: 123.0.6312.58~linuxmint1+virginia

I did not know, pseudo classes could be part of selectors in :has().
On the other hand, I have never used :has(). It may be relatively new and not (yet) supported by all browsers.

Edit: Where I need to select elements by such filigree detail, I would most probably replace CSS by XSL ( div[selectors] or other kind of match in a dedicated template).

Can you point me at a doc where pseudo-classes are explicitly said to be allowed selectors ?

Thank you in advance.

Michael

Quote:

Originally Posted by Michael Uplawski (Post 6492853)

Can you point me at a doc where pseudo-classes are explicitly said to be allowed selectors ?

The CSS waters have become quite muddy of late. Perhaps this example counts?

https://developer.mozilla.org/en-US/docs/Web/CSS/:has

Quote:

Originally Posted by Turbocapitalist (Post 6492858)

The CSS waters have become quite muddy of late. Perhaps this example counts?

https://developer.mozilla.org/en-US/docs/Web/CSS/:has

“functional pseudo-class”. When will they just stop?

Read here: https://developer.mozilla.org/en-US/..._selector_list

Quote:

Note that pseudo-elements and the :has() selector are not valid within the :has() relative selector list.

From memory, Paul Lutus (who is not quoted often enough) once wrote: The W3C must learn a new word. The word is “No”!