28172 sujets

CSS et mise en forme, CSS3

[ Résolu ] Body > h1

Voila je suis tombé sur ceci dans une css et je me demandais ce que ca voulais dire :

body > h1
{
...
}

je me demandais is c'était la meme chose que body h1 {...} ???
Merci Smiley biggrin
Modifié par tovu (30 Aug 2010 - 15:58)
Salut,

tovu a écrit :
je me demandais is c'était la meme chose que body h1 {...} ???

Le sélecteur body > h1 sélectionne tout élément h1 qui est enfant de body (telle est la signification du >), tandis que le sélecteur body h1 (avec une espace) sélectionne tout élément h1 qui est descendant de body (aussi bien enfant que petit-enfant, arrière-petit-enfant, etc.).

Autrement dit, j'ai le bout de code HTML suivant :
<body>
<h1>Je suis enfant et descendant de <code lang="en">body</code></h1>
<div>
  <h1>Je ne suis pas enfant de <code lang="en">body</code>, mais descendant</h1>
</div>
</body>

auquel j'applique la CSS suivante :
body h1 {
  font-style: italic;
  font-weight: normal;
}
body > h1 {
  color: green;
}

Tous les éléments h1 seront en graisse normale et en italique ; en revanche, l'élément h1 contenu dans le div ne sera pas colorié en vert, puisqu'il n'est pas enfant de body.

Bref, tout est question de parenté et l'arborescence du HTML n'a rien à envier à un arbre généalogique. Smiley cligne
Modifié par Victor BRITO (30 Aug 2010 - 14:43)
Sujet clos
Aller à