Why has not working in CSS [select parent]

Question

I am developing a web page and I need select "parent of" another element but not working and also it not working in a simple page as this:

<!DOCTYPE html>
<html lang="es" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
<div class="">
  <a href="#" class="prueba">prueba!</a>
</div>
<style media="screen">
  div:has(.prueba) {
    border: solid 2px red;
  }
</style>
  </body>
</html>

If I use div in style section, working, but I need catch div with the first child, in this case "a" (class prueba) but not working for me.

Thank you!

as a side note the selector is wrong, it should be `div:has( > .prueba)` — Temani Afif, Jan 16 '19 at 20:31
it will not work because it's not yet supported, but your selector is wrong — Temani Afif, Jan 16 '19 at 20:43

score 14 · Accepted Answer · answered Jan 16 '19 at 20:29

14

The :has() selector is CSS4 and has almost no browser support yet (Jan 2019). You will need to use Javascript until support exists.

See Can I Use - :has()

answered Jan 16 '19 at 20:29

SpliFF

38,186
16
91
120

1

2023 Q2+, as of Firefox v103 this is disabled by default. From their dox: "From version 103: this feature is behind the layout.css.has-selector.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config." https://developer.mozilla.org/en-US/docs/Web/CSS/:has – Franklin Skipwhistle Mar 29 '23 at 12:41

Why has not working in CSS [select parent]

1 Answers1