28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

Je suis nouveau sur ce forum et pas encore très à l'aise avec le CSS


J'aimerais savoir si une classe que l'on met sur une balise UL (ou OL) s'applique également à ses LI

Par exemple
<UL class="toto">
<LI>texte 1</LI>
<LI>texte 2</LI>
<LI>texte 3</LI>
</UL>



Me permet-il de mettre dans mon css quelque chose comme
UL.toto { font-size:15px; }
LI.toto { text-decoration : underline; }


et que les propriétés mises pour LI.toto s'appliquent sans avoir à répéter la classe dans chaque balise LI ce qui me semble fastidieux.


Et j'ai à peu près la même question pour les tables, à savoir que si je fais :
<TABLE class="tutu">
<TR>
<TD>Ligne 1 Col 1</TD>
<TD>Ligne 1 Col 2</TD>
</TR>
<TR>
<TD>Ligne 2 Col 1</TD>
<TD>Ligne 2 Col 2</TD>
</TR>
</TABLE>


Puis-je définir dans mon CSS des propriétés pour TR.tutu et TD.tutu et qu'elles s'appliquent bien entendu.


Vous remerciant par avance pour vos conseils éclairés

Bonne journée
Modifié par dandesc (28 Feb 2023 - 08:59)
Administrateur
Hello,

Une "classe" ne s'applique que sur l'élément sur lequel elle est appliquée.

Par contre, les "styles" peuvent s'appliquer en cascade sur les enfants. Cela dépend des propriétés : certaines sont héritables automatiquement (les styles de texte et de typographie en général) tandis que les autres non (tous les autres styles).

a écrit :
et que les propriétés mises pour LI.toto s'appliquent sans avoir à répéter la classe dans chaque balise LI ce qui me semble fastidieux.

Si tu veux éviter d'appliquer une classe sur chaque li, le plus simple est de cibler les li à l'aide d'un sélecteur "de descendance" :

ul.toto li {
/* ici je cible tous les li qui sont descendants d'un ul de classe .toto */
}

Modifié par Raphael (28 Feb 2023 - 09:44)
Meilleure solution
Merci beaucoup,

Cette solution :

ul.toto li {
/* ici je cible tous les li qui sont descendants d'un ul de classe .toto */
}


me convient tout à fait