Héritage d'une classe en css

**picomz** · 17/12/2005, 14h16

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Linaa** · 17/12/2005, 14h46

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**picomz** · 17/12/2005, 15h39

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

Mon code pour tester est :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Est ce que ca marche chez toi ?

Merci

**AlphaYoDa** · 17/12/2005, 16h38

Manquait une virgule

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**picomz** · 17/12/2005, 19h16

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 ?

**AlphaYoDa** · 17/12/2005, 20h03

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

**ePoX** · 17/12/2005, 20h30

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**picomz** · 27/12/2005, 16h10

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

Héritage d'une classe en css

CSS

Discussions similaires

Partager

Partager