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

smog

Membre actif
17 Août 2005
707
93
49
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 !
Club iGen
17 Juin 2017
2 385
2 451
51
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:
 
M

Membre supprimé 1129907

Invité
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 actif
17 Août 2005
707
93
49
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 !
 
M

Membre supprimé 1129907

Invité
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 ;)