CODEWITHSUNDEEP
htmlcsssass
Mormen
Mormen

Reputation: 188

SCSS change atribute of element based on sibling's child

Is there some way how to check if sibling's child has some class and stay in current element?

E.g.:

<div>
  <div className="element">
    <div className="child">
    </div>
  </div>
  <div className="element">
    <div className="child expand">
    </div>
  </div>
  <div className="element">
    <div className="child">
    </div>
  </div>
</div>

If element "child" has class "expand" I wanna change e.g color of all elements "element".

Upvotes: 1

Views: 76

Answers (2)

Josh Koter
Josh Koter

Reputation: 79

Currently the only way to do it with SCSS is with :has(), which as mentioned is not well supported yet. At the time of answering, it's only Firefox, Firefox for Android and Samsung Internet that do not support it (according to MDN). It would look like this:

.element:has(.expand) {
  color: red;
}

Upvotes: 1

Alon Alush
Alon Alush

Reputation: 1389

You can't do that directly in SCSS because it's a preprocessor language with no access to the DOM. To accomplish this, you would need to use JavaScript.

Upvotes: 0

Related Questions