1

:has() selector is not working as expected. is there any issue in syntax or code? CSS isn't reflecting in output.

Can any one suggest me required changes here to get CSS worked?

<html>
<head>
<style>

 div.class2:has(div.class3:has(span.class4:contains('SampleText')))+div.class5 div.class6 li.class7{
    display:none;
  }
div.class2:has(div.class3:has(span.class4:contains('SampleText'))){
    background-color: azure;
  }


</style>
</head>

<body>
<div class="class1">

  <div class="class2">
    <div class="class3">
      <span class="class4">SampleText</span>
    </div>
  </div>

  <div class="class5">
    <ul class="class6">
      <li class="class7">hello world</li>
    </ul>
  </div>

</div>
</body>
</html>
UI Admin
  • 11
  • 2

1 Answers1

0

Maybe this would help:

  div.class2:has(div.class3 span.class4) + div.class5 ul.class6 li.class7{
    display:none;
  }
  div.class2:has(div.class3 span.class4){
    background-color: azure;
  }

It is not the same as you tried to do, but :contains selector is not supported and :has cannot be nested. Also, you probably meant instead of div.class6, the ul.class6 element. You can select elements that contain certain text with classes and ids.

tamiPian
  • 41
  • 4
  • Hi, Thanks for responding. you are correct for ul.class6 element - it was a mistake - i've changed it. But my aim is to hide li.class7 element only when span.class4 is having "SampleText" - other wise li.class7 should be displayed. any idea? – UI Admin Oct 13 '22 at 11:45
  • What you described in the comment can be done in javascript like this: __ – tamiPian Oct 15 '22 at 18:15