Héritage d'une classe en css

Version imprimable

17/12/2005, 14h16
picomz

Héritage d'une classe en css
Bonjour,

Je débute dans la création de site web avec les css et je voudrais savoir si c'est possible de faire des classes css qui héritent d'autre classe.

Petit exemple pour expliquer :
Code:

1 2 3 4 5 6 7 8 9 10 /* Classe père */ .pere { color:white; } /* Classe enfant */ .enfant .pere { font-weight:bold; }
Bon ca je sais que ca marche mais je voudrais en gros que lorsque j'utilise la classe enfant j'ai un texte blanc et en gras.

S'il y'a un moyen quelconque pour le faire, meme si c'est pas comme je l'ai fait dans l'exemple ce serai sympa de me le dire. (J'espère que mon explication est assez claire)

Merci

Par rapport à ce que tu veux, ce serait plutôt :

Code:

1
2
3
4
5
6
7
8
9
/* Classe père */
.pere .enfant {
   color:white;
}
 
/* Classe enfant */
.enfant {
   font-weight:bold;
}

17/12/2005, 15h39
picomz

Désolé ca marche pas chez moi...

Mon code pour tester est :

Code:

<p class="enfant">Test</p>

Le texte s'affiche bien en gras mais pas en blanc.

Est ce que ca marche chez toi ?

Merci

Manquait une virgule

Code:

1
2
3
4
5
6
7
8
9
/* Classe père */
.pere, .enfant {
   color:white;
}
 
/* Classe enfant */
.enfant {
   font-weight:bold;
}

17/12/2005, 19h16
picomz

Merci, ca fait bien ce que je veux :)

Juste une autre petite question, c'est pas vraiment de l'héritage en fait, c'est plus du partage de propriétés ?
17/12/2005, 20h03
AlphaYoDa

oui, mais c'est comme ça qu'on fait en css :?

Oui ce n'est pas de l'héritage comme on l'entends en poo..

Et je dirais que c'est plutot de la réécriture.
Code:

1 2 3 4 5 6 7 enfant{ color:white; } enfant{ color:black; }
bon ici l'exemple est ballo mais il faut se mettre dans une situation ou le premier enfant est dans theme général et le second dans un theme autre appeler apres le theme général.

L'exemple donné plus tôt dans les posts induit en erreur sur cette notion d"héritage en css car ici '.pere, .enfant' sert à attribuer les mêmes attributs aux classes cités.

Alors que si l'on fait '.pere .enfant', on cherche à ciblé les élément qui ont comme class enfant et qui sont contenu dans un élément qui ont comme class pere.
Ce qui explique que tout à l'heure cela ne fonctionnait pas.

Tu peux jeter un oeil au code suivant pour mieux comprendre.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> .pere , .enfant{ color:#000066; } .enfant2{ color:#990000; } .pere2 .enfant2{ color:#00FF00; } </style> </head> <body> <div class="pere">Pere</div> <br /> <span class="enfant">enfant</span> <br /> <br /> <br /> <div class="pere2">pere2 <br /> <span class="enfant2">enfant2</span> </div> <span class="enfant2">enfant2</span> </body> </html>
voili voilou

bye

27/12/2005, 16h10
picomz

Ok, merci beaucoup, j'ai bien compris comment fonctionnai l'heritage en css maintenant :D