Sélecteur css dans un autre élément

Question

J'ai deux types de couleurs à l'intérieur d'un bouton personnalisé, où la première est définie par la classe du bouton, et la seconde est définie par la classe du span à l'intérieur de ce bouton, comment puis-je changer ces deux couleurs lorsque le bouton est actif ?

CSS :

.buttonClass{
  color:black;
}
.buttonClass:active{
  color:white;
}
.spanClass{
  color:grey;
}
.spanClass:active{ //working only when I click on span, but not for whole button
  color:red;
}

HTML :

<button class="buttonClass">
  <span class="spanClass">
    black/white text
  </span>
  grey/red text
</button>

Answer 1

Essayez ceci

.buttonClass:active .spanClass{
  color:red;
}

Answer 2

Quelques trucs :

• Ce serait bien de voir un exemple de code de ce que vous essayez de faire. réaliser. J'ai déposé votre code dans JFiddle ici : http://jsfiddle.net/ncAkG/ mais ce que tu essaies de faire n'est pas clair. atteindre.
• La pseudo-classe :active ne sera pas nécessairement la classe meilleure approche sur le span puisqu'elle n'est pas standard sur les spans.

Cependant, après avoir jeté un coup d'œil, votre meilleure option si vous essayez de modifier l'apparence du span en fonction de l'état actif du bouton serait d'hériter la nouvelle couleur de l'état actif du parent, comme ceci :

.buttonClass:active .spanClass{
  color:red;
}

Cela signifie que lorsque '.buttonClass' est actif, l'élément enfant '.spanClass' doit être rouge.

Voici le violon mis à jour : http://jsfiddle.net/ncAkG/1/

C'est ce que vous espériez obtenir ?

Pour aller un peu plus loin, vous pouvez faire la même chose en fonction d'autres événements sur le parent, comme le survol :

.buttonClass:hover .spanClass{
  color:green;
}

Voir le violon ici : http://jsfiddle.net/ncAkG/2/

Vous verrez maintenant que le span devient vert lorsque vous survolez le bouton, et rouge lorsque le bouton est cliqué (et devient actif).

Answer 3

Vous aurez besoin d'une classe supplémentaire pour le texte gris/rouge pour réaliser cela.

EDIT :

.buttonClass:active > .spanClass{
 color:red;
}