2016-08-08 70 views
1

Ich habe eine Rails-Seite, die mit einer Sammlung von Elementen geladen wird. Jeder Gegenstand hat einen Knopf. Und es ist ein svg Bild im Innern bekommt:Kann meine Elternklasse css das Kind ändern?

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

Einige der Gegenstände haben einen Knopf mit der Klasse "die Schaltfläche" und andere haben Teile mit dem Button "the-Taste-blau".

Ich möchte die cls-5-Klasse machen haben die CSS: stroke:$dark-gray;, wenn die Eltern-Taste wird die Klasse the-button und haben die CSS: stroke:$white, wenn es die Klasse the-button-blue.

Ist das möglich?

Hinweis:

Meine CSS-Dateien sind .scss Dateien und ich jquery laufen haben

Antwort

4

ich die cls-5 Klasse machen wollen haben die CSS: stroke:$dark-gray; wenn die Mutter Taste ist die Klasse the-button, und haben die css: stroke:$white;, wenn es die Klasse the-button-blue ist.

Ja:

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

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

Erläuterung: Wenn Sie eine Kette von Selektoren in CSS mit nur einem Raum schreiben jeden Wähler trennt, zeigt der Raum, dass jeder nachfolgende Selektor ein Nachkomme des vorhergehenden ist .

N.B.Der Selektor nach jedem Leerzeichen darf nicht das Kind des vorherigen Selektors sein - es kann das Enkelkind oder der Urenkel usw. sein. Das Leerzeichen zeigt nur an, dass der Selektor ein Nachkomme des vorherigen Selektors ist.