1

Im trying to apply a CSS style to a parent element if it has a specified child element. According to this doc it's possible: http://dev.w3.org/csswg/selectors-4/#relational

So when I put that into code, it doesn't seem to be working: https://jsfiddle.net/2rabacg7/

How come it's not working?

HTML

<div class="outter">
    <div class="yes-color">
        text
    </div>
</div>

<br/>

<div class="outter">
    <div class="no-color">
        text
    </div>
</div>

CSS

.outter:has(> .yes-color) {
    background-color: red;
}
cYn
  • 3,291
  • 6
  • 25
  • 43

1 Answers1

5

According to W3C's Current CSS Status, Selectors Level 4 has not yet become a standard and is still under the Working Drafts section. According to W3C...

Below are draft documents: Candidate Recommendations, Last Call Drafts, other Working Drafts . Some of these may become Web Standards through the W3C Recommendation Track process. Others may be published as Group Notes or become obsolete specifications.

Unless I'm mistaken, the selectors you are using have not yet been implemented in modern browsers (3/30/2015).

As a solution, I suggest either altering your html for the situation or possibly using jQuery parent, which effectively does the same thing as your future-css.

ElliotSchmelliot
  • 7,322
  • 4
  • 41
  • 64
  • You're very likely to be right on this one as the previous drafts/version of that document doesn't include the :has feature – cYn Mar 31 '15 at 00:22
  • @cYn Guess we'll just have to be patient. In the meantime i've added a couple of alternative solutions. – ElliotSchmelliot Mar 31 '15 at 00:25