Search code examples
cssless

Set background conditional on child class

I want to change the background of the parent (panel-heading) only when the child button has the class "collapsed" which occurs when it's clicked. I can only use styles.

HTML:

<div class="panel">
  <div class="panel-heading">
    <button class="collapsed">...</button>
  </div>
</div>

LESS: (I found this but it's not working)

.panel-heading:has(button[class="collapsed"]) {
  background-color: #fff !important;
}

OR

.panel-heading:has(button.collapsed) {
  background-color: #fff !important;
}

Any suggestions? Thank you!

Solution

  • Your code is working, but since you are setting the background color to white, you can't tell the difference.

    Try with different background color.

    Check out below code by clicking on Run code snippet button.

    .panel-heading:has(button.collapsed) {
  background-color: pink;
}
    <div class="panel">
  <div class="panel-heading">
    <button class="collapsed">...</button>
  </div>
</div>