HTML/CSS : question héritage (et *) !

smog

Membre actif
17 Août 2005
717
93
50
Bonjour à tous,
J'ai un petit souci de compréhension sur l'héritage.
Voici un exemple simplifié de code :

HTML
Bloc de code:
<section>
    <header>
        <h1>Titre</h1>
    </header>
</section>

CSS
Bloc de code:
* {
color: white;
}

section {
color: black;
}

Ma question :
Pourquoi le <h1> "Titre" apparaît en blanc ? Ne devrait-il pas hériter de la propriété "color: black;" du <section> puisqu'il est à l'intérieur de ce bloc ?
Est-ce une caractéristique de "*" que je n'ai pas comprise ?
Merci pour votre aide ![/CODE]
 
C'est normal puisque tu imposes la couleur blanche à tous les éléments.
Donc cela équivaut à avoir :

h1 {color: white;}

Pour ma part utiliser "*" est une erreur. La preuve, tu es perdu. ;)

PS : L'une de mes dernières bonnes actions de l'année. Aider un chAAatt ! :smuggrin:
 
La partie section est bien en noir ;)
Bloc de code:
<section>
    <header>
        <h1>Titre</h1>
    </header>
    section
</section>

Si à la place du * tu utilisais "body" tu n'aurais pas de problème pour ton test d'héritage

Dans ton cas, le css cherche une propriété h1 dans le css et n'en trouve pas directement une.
Il utilise alors le * qui correspond à tout y compris le h1. C'est presque un: body,section,header, h1...
 
Merci à vous. C'est plus clair dans ma tête il me semble.
Je pensais que le <h1> hériterait des propriétés CSS de <section> même si h1 n'était pas mentionné dans le CSS. Simplement parce que color est véritable (ça se dit ?) et que dans mon HTML <h1> est bien enfant de <section>.
Mais donc, si je comprends bien, c'est sur le sens de "*" que j'ai faux : "*" signifie "s'applique à tout ce qui n'est pas spécifié explicitement dans le fichier CSS" et est "prioritaire" devant l'héritage direct ?

Bon, vous n'avez pas autre chose à faire un 25 décembre au fait ? ;-)

PS : Merci pouppinou, Fripon (en photo) te revaudra ça !
 
C’est bien ça, en premier c’est l’élément indiqué dans le css qui est pris en compte (h1), puis le « * » qui correspond à tous les éléments et finalement c’est l’héritage.
Tu peux reprendre ton test d’origine et mettre le section en gras ou italique pour faire un test ;)