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

smog

Membre émérite
17 Août 2005
659
69
46
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]
 

pouppinou

Une vie de Chien et de Pommé, et je suis heureux !
17 Juin 2017
2 239
2 003
48
Niche.
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:
 

ecatomb

Membre d’élite
Club MacG
21 Septembre 2016
4 537
1 668
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...
 

smog

Membre émérite
17 Août 2005
659
69
46
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 !
 

ecatomb

Membre d’élite
Club MacG
21 Septembre 2016
4 537
1 668
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 ;)