Use of :has and ::before in css

Question

Why doesn't this work? Specifically, I'm trying to show some text in a div, if it contains a hidden form...

form.hidden {
  display: none;
}

div:has(form.hidden)::before {
  color: red;
  font-size: x-large;
  content: 'This DIV has a hidden FORM';
}

<div>
  <form class="hidden">
    form
  </form>
</div>

score 3 · Accepted Answer · answered Jun 23 '19 at 17:30

3

:has() is an experimental feature, no browsers support it yet . Please see the browser compatibility chart: https://developer.mozilla.org/en-US/docs/Web/CSS/:has

The spec also indicates that it cannot be used in stylesheets:

The :has() pseudo-class takes a selector list as an argument. In the current specification :has is not marked as part of the live selector profile, which means it can not be used within stylesheets; only with functions like document.querySelector().

answered Jun 23 '19 at 17:30

skyline3000

7,639
2
24
33

Ah, that would explain it :) What about with SASS? – user4893295 Jun 23 '19 at 17:42
1

@user4893295 SASS is only a preprocessor, it generates plain CSS where :has() is not avalaible. SASS has nothing to do with the document content, it is not used to parse it. – G-Cyrillus Jun 23 '19 at 17:50
Although relevant, is the problem not related to the `content` input? – Matt Jun 23 '19 at 18:02
@G-Cyr sure, but wondered if preprocessing might give a deeply clever way of doing it ;) – user4893295 Jun 23 '19 at 23:42

Use of :has and ::before in css

1 Answers1