A quoi correspond cette syntaxe ?

**Loko** · 06/09/2007, 15h59

Bonjour

Voici un fichier CSS que j'ai trouvé :

Code :

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

1
2
3
4
5
6
7
8
 
.zpWinWinxpContainer .zpWinTitleArea {
  font-family: "Trebuchet MS, Verdana, Arial , Heltvetica, sans-serif";
  font-size: 13px;
  font-weight: bold;
  height: 28px;
  text-align:left;
}

Il n'y a pas de virgule entre zpWinWinxpContainer et zpWinTitleArea donc ca ne veut pas dire que les propriétés vont s'appliquer à ces 2 classes.

J'ai lu les cours et les FAQ et cette syntaxe n'est pas expliquée.

Pouvez vous me dire à quoi cela correspond et dans quelle syntaxe d'utilisation au niveau HTML ?

Merci

**Momodedf** · 06/09/2007, 16h21

Ca veut dire qu'on définit les propriétés de toutes les classes .zpWinTitleArea qui sont elles même contenues dans une classe .zpWinWinxpContainer.

**Loko** · 07/09/2007, 08h34

Oui, c'est ce dont je me suis douté, mais je ne comprends pas pourquoi mon texte ne prend pas la forme quand je lui donne la classe "zpWinTitleArea " ...

.

**Loko** · 07/09/2007, 14h30

Je viens de faire un exemple tres simple :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<style>
.A {
  color:#000000;
}
 
.A .B {
  color:#FF0000
}
 
</style>
<body>
<div class="B">machin</div>
</body>

le texte "machin" devrait s'afficher en rouge, mais ce n'est pas le cas. Pourquoi ?

Merci

**Bisûnûrs** · 07/09/2007, 14h56

Envoyé par Loko

Je viens de faire un exemple tres simple :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<style>
.A {
  color:#000000;
}
 
.A .B {
  color:#FF0000
}
 
</style>
<body>
<div class="B">machin</div>
</body>

le texte "machin" devrait s'afficher en rouge, mais ce n'est pas le cas. Pourquoi ?

Merci

C'est très simple, parce que ton code est erroné.

Avec le même CSS, la structure de ton code HTML doit être celle-ci :

Code html :

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

1
2
3
<div class="A">
   <div class="B">machin</div>
</div>

**Loko** · 08/09/2007, 08h39

D'accord

Donc cela veut dire qu'au niveau HTML on doit forcément suivre la structure d'héritage du CSS ?

Je trouve ca assez lourd quand même. J'imaginais pouvoir par exemple définir une classe de base "A" avec les propriétés que je veux retrouver partout, par exemple la police de caracteres, puis ensuite plusieurs classes "B", "C" selon les besoins, sans avoir à m'assurer à chaque fois que le code HTML utilise bien la classe de base. Si c'est pas possible bah tant pis ;-) mais je trouve ca lourd, cela aurait été bien si on avait pu utiliser de l'héritage pur au sens de la programmation objet.

Par contre cela peut aussi marcher si je fais

Code :

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

<div class="A B">machin</div>

**Bisûnûrs** · 08/09/2007, 11h24

Envoyé par Loko

cela aurait été bien si on avait pu utiliser de l'héritage pur au sens de la programmation objet.

Ben le CSS n'a jamais été un langage de programmation objet et plus encore un langage de programmation, donc ça n'arrivera sans doute jamais. ^^

Envoyé par Loko

Par contre cela peut aussi marcher si je fais

Code :

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

<div class="A B">machin</div>

En fait pour cette balise tu appelles les deux classes A et B.

En ce qui concerne l'héritage, ça fonctionne très bien en CSS (Cascading Style Sheets), mais la structure de ton code HTML doit permettre l'héritage de deux éléments, c'est-à-dire qu'il doit y en avoir un parent et un enfant, ça s'appelle simplement l'imbrication.

**hlr** · 08/09/2007, 12h37

Heu... j'ai comme un doute là...

Quand on écrit : .zpWinWinxpContainer.zpWinTitleArea (sans espace entre les 2), là oui, le style va s'appliquer à l'élément qui a pris les 2 classes

Dans son cas : .zpWinWinxpContainer .zpWinTitleArea, les élements sur lesquels le style va s'appliquer sont ceux qui sont de classe zpWinTitleArea et qui sont descendants d'un élement de classe zpWinWinxpContainer

L'espace a une très grande importance en CSS

**Bisûnûrs** · 08/09/2007, 16h02

Envoyé par hlr

Dans son cas : .zpWinWinxpContainer .zpWinTitleArea, les élements sur lesquels le style va s'appliquer sont ceux qui sont de classe zpWinTitleArea et qui sont descendants d'un élement de classe zpWinWinxpContainer

On n'a pas dit le contraire.

A quoi correspond cette syntaxe ?

CSS

Discussions similaires

Partager

Partager