Может ли мой родительский класс css изменить ребенка?

Question

У меня есть страница с рельсами, которая загружается с коллекцией предметов. У каждого элемента есть кнопка. И его получил изображение SVG внутри него:

<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> 

Некоторые элементы имеют кнопку с классом «кнопки-» и другие элементы с помощью кнопки «кнопки-голубой-».

Я хочу сделать класс CLS-5 имеет CSS: stroke:$dark-gray; когда кнопка родительского класса the-button, и в CSS: stroke:$white когда класс the-button-blue.

Возможно ли это?

Примечание:

Мои CSS файлы .scss файлы и я JQuery работает

Answer 1

Я хочу, чтобы сделать cls-5 класс имеют CSS: stroke:$dark-gray; когда кнопка родительский класс the-button, и имейте css: stroke:$white; если это класс the-button-blue.

Да:

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

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

Объяснение: Когда вы пишете цепочку селекторов в CSS с только пространство, отделяющее каждый селектор, пространство указывает на то, что каждый последующий селектор является потомком предыдущего ,

N.B.Селектор после каждого пробела может не быть быть дочерним элементом предыдущего селектора - это может быть внук или правнук и т. Д. Пространство указывает только, что селектор является потомком предыдущего селектора.