L'utilisation du selecteur .nomclass permet d'assigner une ou des propriétés de feuille de style css à la balise HTML ou XHTML dont l'attribut
CLASS à comme valeur est "
nomclass".
On utilise la
class quand les propriétés s'appliquent à plusieurs
éléments.
Nous mettrons pour la feuille de style :Exemple de code :
<STYLE type="text/css">
ADDRESS { /* Propriété */ }
.nom { text-decoration:underline; }
</STYLE> Le code HTML ou XHTML sera :Exemple de code :
<ADDRESS class="nom"> </ADDRESS> Cette technique permet d'assigner un soulignement à toutes les balises HTML ou XHTML dont l'attribut
class a comme valeur "nom".
Attention, les balises HTML ou XHTML
ADDRESS dont la valeur de l'attribut CLASS est "nom"
héritent aussi des propriétés définîes avec
ADDRESS{}, mais pas les autres balises.
Si vous avez spécifié une même propriété, il semblerait qu'en règle général que ce soit la dernière
la propriété css qui prend le dessus et les autres se cumulent.(voir Chap : Poids des sélecteurs)Exemple de code :
<STYLE type="text/css">
ADDRESS { font-size:12px; }
.nom { font-size:15px;
text-decoration:underline; }
</STYLE>Si vous ne voulez pas que la propriété de la
CLASS prenne le dessus, utilisez
!important.
Exemple de code :
<STYLE type="text/css">
ADDRESS { font-size:12px !important; }
.nom { font-size:15px;
text-decoration:underline; }
</STYLE> Attention: !important n'est pas reconnu par les anciens navigateurs et est à utiliser dans les cas exceptionnels.
Nous pouvons l'utiliser différemment,
pour que seules les balises ADDRESS de class "nom" en hérite.Nous mettrons dans la feuille de style :Exemple de code :
<STYLE type="text/css">
ADDRESS { font-size:12px !important; }
ADDRESS.nom { text-decoration:underline; }
</STYLE> Le code HTML sera :Exemple de code :
<ADDRESS class="nom"> </ADDRESS> Les autres balises HTML ou XHTML ayant un attribut CLASS de valeur "nom" n'héritent pas de cette propriété.
Attention, la balise ADDRESS de class "nom" hérite aussi des propriétés définîes avec ADDRESS{}.