CSS :has() not working to select pseudo-class :link
by Turbocapitalist from LinuxQuestions.org on (#6KKAM)
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
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