CODEWITHSUNDEEP
csssass
Kiwi
Kiwi

Reputation: 2773

Setting style on parent SASS

I have the following HTML. In this case it has a button to toggle the error message, but in real life this will be dynamic

<md-card>
  <md-card-content layout-padding>
    <div class="subtitle"><span translate="allocation"></span></div>
    <div><md-button ng-click="test = !test">Testing</md-button></div>
    <div class="infoMessages" ng-show="test">
      Error
    </div>
  </md-card-content>
</md-card>

<md-card>
  <md-card-content layout-padding>
    <div class="subtitle"><span translate="allocation"></span></div>
    <div><md-button ng-click="test = !test">Testing</md-button></div>
    <div class="infoMessages" ng-show="test">
      Error
    </div>
  </md-card-content>
</md-card>

now I'm trying to set the border color of the md-card to red when the Error is visible, this is equal to the .infoMessages class being visible inside the md-card.

I tried some scss configurations but I can't seem to select my parent. This is close I think, but I'm not sure.

md-card {
  md-card-content + .infoMessages & {
    border: 1px solid red;
  }
}

Code pen for testing: https://codepen.io/cskiwi/pen/jYxyqy

I started wondering if it is even possible, any suggestions? Anyway already thanks for reading!

Greetings Glenn

Upvotes: 0

Views: 3259

Answers (2)

Alexis Vandepitte
Alexis Vandepitte

Reputation: 2088

You can't apply style to parent selector. It's not existing in css, nor sass.

But you can use ng-class on md-card-content :

<md-card-content layout-padding ng-class="{'error': test1 == true}">

And then apply style like this :

md-card-content {
    &.error {
        border: 1px solid red;
    }
}

Fork of your codepen : https://codepen.io/Alvan/pen/RxyKMP

By the way, i needed to set display:block; on md-card-content because this element has no base style at all.

Oh sorry, you were talking about md-card. Mh. Sorry, my mistake, but this will work the same for md-card.

Upvotes: 1

Justin L
Justin L

Reputation: 21

It is not possible to set styles on a parent based on child or later sibling selectors in CSS. Selectors only work in two basic ways, by selecing some sibling further down the HTML document or some nested child node. Just as you cant set styles on a parent you can not set styles on a previous sibling.

In your example the computed style you have here is md-card-content + .infoMessages md-card which would make md-card a child of .infoMessages

You could change the color by using javascript to determine if the error is visible and then find the closest md-card parent or you could add an error class to the md-card and then you could change the color and visibility at the same time.

Upvotes: 1

Related Questions