18008 sujets

Questions générales et questions de débutants

[Résolu] Selecteur et propriétés

Hello les amis,
Ca fait une semaine que j expérimente l'HTML et mnt le CSS, j'avoue que j'ai un peu de mal concernant les propriétés. Je m'explique, j'ai une liste non ordonnée "ul", avec des liens "a", et des sous liens. Je voulais faire un menu, déjà pour appliquer la propriété text-decoration j'allais spontanément l'attribuer au selecteur "ul". Apres plusieurs essais j'ai pu remarquer qu elle ne s'appliquait qu'au selecteur "a". Pourquoi ? Pareil pour le display dans quel selecteur le positionner ?

Je suis perdue Smiley hum Smiley rolleyes Smiley confus Smiley bawling .
Si quelqu'un passe par là, SOS......
Salut Smiley smile

alsa-user a écrit :
Apres plusieurs essais j'ai pu remarquer qu elle ne s'appliquait qu'au selecteur "a". Pourquoi ?

C'est ce qu'on appelle la notion d'héritage en CSS. Je te conseille de lire cet article du MDN, c'est une notion essentielle et je trouve que c'est bien expliqué ici Smiley smile

Par exemple, si tu appliques une couleur de texte à ton conteneur <ul>, tous ses enfants (les <a>) vont aussi avoir cette couleur. C'est parce que la propriété color est héritée.

Dans le cas de la propriété text-decoration, celle-ci n'est pas hérité, donc l'appliquer au conteneur <ul> ne l'appliquera pas aussi à ses enfants <a>.

Pour savoir si une propriété est héritée ou non, tu peux te reporter à la doc du MDN : tout en bas de page, en dessous de la section "Spécificités" il est indiqué si oui ou non la propriété bénéficie de l'héritage.

alsa-user a écrit :
Pareil pour le display dans quel selecteur le positionner ?

ça dépendra beaucoup du contexte, avec plus de précisons sur ce point on pourra mieux t'aider Smiley smile
Modifié par Loraga (28 Mar 2021 - 01:00)
Meilleure solution
Modérateur
Coucou,

Je me permets juste une petite intervention pour cette partie :
Loraga a écrit :
Par exemple, si tu appliques une couleur de texte à ton conteneur &lt;ul&gt;, tous ses enfants (les &lt;a&gt;) vont aussi avoir cette couleur. C'est parce que la propriété color est héritée.

Malgré l'héritage de color, la balise <a> (avec un argument href) à un style imposé (par les navigateurs il me semble) qui écrase cette couleur héritée normalement. Donc pour styler un liens vaut mieux le cibler directement Smiley smile

Bonne journée !
Salut Laurent, merci pour tes précisions Smiley smile

_laurent a écrit :
Malgré l'héritage de color, la balise &lt;a&gt; (avec un argument href) à un style imposé (par les navigateurs il me semble) qui écrase cette couleur héritée normalement. Donc pour styler un lien vaut mieux le cibler directement Smiley smile


Tu as totalement raison, et si je ne me trompe pas, c'est la règle des priorités en CSS, un autre concept important lié à l'héritage et expliqué ici.

Dans notre cas, appliquer une couleur au conteneur n'écrasera effectivement pas la couleur bleue par défaut attribuée au <a> enfant. Les navigateurs appliquent tous des styles par défaut à certains éléments HTML, il faut donc du coup forcément cibler cet élément avec notre CSS pour écraser son style par défaut.

D'ailleurs, si ça peut aider, voici une liste du CSS par défaut des éléments HTML.
Modifié par Loraga (29 Mar 2021 - 11:32)
Super, merci pour les liens j'ai finis par comprendre, je compte reprendre demain mon dossier html/CSS si je me retrouve à nouveau dans une situation qui porte à confusion je reviendrais vers vous. C était des notions de parents enfant et du coup héritage que je n'avais pas assimilé, merci à vous 2 !!!

Bonne soirée Smiley biggrin
Sujet clos
Aller à