Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

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

1 view
Skip to first unread message

Etienne

unread,
Aug 24, 2010, 5:05:06 AM8/24/10
to
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

yamo'

unread,
Aug 24, 2010, 5:31:34 AM8/24/10
to
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 ?
<http://pasdenom.info/test/over.html>

--
Stéphane
http://pasdenom.info

SAM

unread,
Aug 24, 2010, 6:42:47 AM8/24/10
to
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

unread,
Aug 24, 2010, 8:30:04 AM8/24/10
to
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 ?
> <http://pasdenom.info/test/over.html>
>

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

unread,
Aug 24, 2010, 8:34:15 AM8/24/10
to
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

unread,
Aug 24, 2010, 8:46:38 AM8/24/10
to
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

0 new messages