CODEWITHSUNDEEP
csssass
Rorschach
Rorschach

Reputation: 3802

Can my css parent class change the child?

I have a rails page that loads with a collection of items. Each item has a button. And its got a svg image inside it: 

<button class="the-button">
  <svg class="the-pic">
    <g class = "cls-2">
      <path class="cls-5" d="M117.58,133.33l-24.7,25.38S85,165.63,88,173.08a11.24, ... "></path>
    </g>
  </svg>
</button>

Some of the items have a button with the class "the-button" and others have items with the button "the-button-blue".

I want to make the cls-5 class have the css: stroke:$dark-gray; when the parent button is the class the-button, and have the css: stroke:$white when it is the class the-button-blue.

Is this possible?

Note:

My css files are .scss files and I have jquery running

Upvotes: 1

Views: 91

Answers (1)

Rounin
Rounin

Reputation: 29453

I want to make the cls-5 class have the css: stroke:$dark-gray; when the parent button is the class the-button, and have the css: stroke:$white; when it is the class the-button-blue.

Yes:

.the-button .cls-5 {
stroke: $dark-gray;
}

.the-button-blue .cls-5 {
stroke: $white;
}

Explanation: When you write a chain of selectors in CSS with just a space separating each selector, the space indicates that each subsequent selector is a descendant of the previous one.

N.B. The selector after each space may not be the child of the previous selector - it may be the grandchild or the great-grandchild etc. The space only indicates that the selector is a descendant of the previous selector.

Upvotes: 4

Related Questions