css changer un attribut dépendant d'une class parente.

Le
Etienne
Salut j'ai un truc dans ce genre:

div.c1 {background-color:red}
div.c2 {color:blue}
.over {}

<div id='pere' class='c1'>
<div id='fils' class='c2'>hop</div>
</div>

a un moment je change la classe de l'objet pere
Sa class devient class='c1 over'

j'aimerai qu'a ce moment l'attribut color du div fils change.

Est ce possible de faire cela ?

Etienne
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
yamo'
Le #22498671
Salut,

Etienne a tapoté, le 24/08/2010 11:05:
j'aimerai qu'a ce moment l'attribut color du div fils change.

Est ce possible de faire cela ?



C'est ça que tu veux ?

--
Stéphane
http://pasdenom.info
SAM
Le #22498841
Le 24/08/10 11:05, Etienne a écrit :
Salut j'ai un truc dans ce genre:

div.c1 {background-color:red}
div.c2 {color:blue}



div.c1.over div.c2 { color: red } /* pour IE */
div.c1:hover div.c2 { color: red } /* pour les autres */

div.c1 { cursor: pointer }

Plus simple (tous les divs du pere passent en rouge):

.c1 { color: blue; background: red }
.c1:hover div, c1.over div { color: red }

ou, seulement les éléments de class 'c2' :

.c1 { color: blue; background: red }
.c1:hover .c2, c1.over .c2 { color: red }

Mon préféré :

#pere { color: blue: background: red; cursor: pointer }
#pere:hover #fils, #pere.over #fils { color: red }


<div id='pere' class='c1'>
<div id='fils' class='c2'>hop</div>
</div>

a un moment je change la classe de l'objet pere
Sa class devient class='c1 over'

j'aimerai qu'a ce moment l'attribut color du div fils change.

Est ce possible de faire cela ?



toutafé

Le div fils hérite de la couleur du div pere
il suffit donc au départ de fixer les couleurs pour le père
ensuite, au survol du pere, ses fils ou ceux de class 'c2' passent en red

--
Stéphane Moriaux avec/with iMac-intel
Etienne
Le #22499081
Le 24/08/2010 11:31, yamo' a écrit :
Salut,

Etienne a tapoté, le 24/08/2010 11:05:
j'aimerai qu'a ce moment l'attribut color du div fils change.

Est ce possible de faire cela ?



C'est ça que tu veux ?




non pas tout a fait.
en fait c'est pas un hover...
c'est une deuxieme class que j'ajoute sur le div pere. c'est pour faire
a peu pres la meme chose, sauf que ce n'est pas dependant de la souris
mon histoire.
Etienne
Le #22499071
Le 24/08/2010 12:42, SAM a écrit :
.c1 { color: blue; background: red }
.c1:hover .c2, c1.over .c2 { color: red }



hum je vais tester mais je crois que je n'ai pas été clair.
j'ai utilisé la class over mais je ne pensais pas du tout a hover.
j'aurai du l'appeler 'truc'

en gros je cherche le css afin que

<div id='pere' class='c1'>
<div id='fils' class='c2'>hop</div>
</div>

affiche c2 en bleu
et j'ai ajouté la class truc

<div id='pere' class='c1 truc'>
<div id='fils' class='c2'>hop</div>
</div>
affiche c2 en rouge

sachant que j'ai forcément défini une couleur pour c2 genre
div.c2 {color:blue;}

Voila
Merci.
Etienne
Le #22499141
A ouai...
je viens de comprendre un truc hyper important qui est que l'ordre de
déclaration dans les CSS est hyper important.

donc mon probleme etait de changer la couleur de c2 lorsque on AJOUTE
une class a c1

div.c1 {background-color:red}
div.c1 div.c2 {color:blue}
div.truc div.c2 {color:yellow;}

avec cette declaration,

<div id='pere' class='c1'>
<div id='fils' class='c2'>hop</div>
</div>

va bien affiché mon texte en blue

et
<div id='pere' class='c1 truc'>
<div id='fils' class='c2'>hop</div>
</div>

va l'afficher en jaune car d'abors il va lire
div.c1 div.c2 {color:blue}
puis
div.truc div.c2 {color:yellow;}

donc au final ce sera jaune...

Si j'avais déclaré
div.c1 {background-color:red}
div.truc div.c2 {color:yellow;}
div.c1 div.c2 {color:blue}

et bien jamais mon hop ne deviendrai jaune...
bon ben j'ai plus qu'a tester tous les navigateurs.

Merci en tout cas, c'est en testant vos propositions que j'ai trouvé la
solution !

Etienne
Publicité
Poster une réponse
Anonyme