Explication détaillée de la façon d'utiliser le sélecteur de classe CSS_CSS/HTML

Sélecteur de classe
En CSS, le sélecteur de classe s'affiche avec un point :

Copier le code Le code est comme suit :

.center {text-align: center>

Dans l'exemple ci-dessus, tous les éléments HTML avec la classe center sont centrés.
Dans le code HTML ci-dessous, les éléments h1 et p ont la classe centrale. Cela signifie que les deux respecteront les règles du sélecteur ".center".

Copier le code Le code est le suivant :

   

Ce titre sera aligné au centre

Ce paragraphe sera également aligné au centre
.

Remarque : les chiffres ne peuvent pas être utilisés comme premier caractère du nom de la classe ! Cela ne fonctionnera pas dans Mozilla ou Firefox.
Comme l'identifiant, la classe peut également être utilisée comme sélecteur dérivé :

Copier le code Le code est le suivant :

.fancy td {
      color : #f60 ; les cellules du tableau à l'intérieur des grands éléments afficheront du texte orange sur un fond gris. (Un élément plus grand nommé fantaisie peut être une table ou un div)
les éléments peuvent également être sélectionnés en fonction de leur classe :

Copier le code

Le code est le suivant : td.fancy { couleur : #f60 ; fond : }

Dans l'exemple ci-dessus, la cellule du tableau avec le nom de classe fantaisie sera orange avec un fond gris.




Copier le code

Le code est le suivant :

  Sélecteur multi-catégories

1. En HTML, une valeur de classe peut contenir une liste de mots, chaque mot étant séparé par des espaces. Par exemple, si vous souhaitez marquer un élément spécifique comme à la fois important et avertissement, vous pouvez écrire (l'ordre des deux mots n'a pas d'importance, vous pouvez écrire avertissement important) :

Copier le code

Le code est le suivant :

Ce paragraphe est un avertissement très important .

Nous supposons que tous les éléments avec une classe importante sont en gras et que tous les éléments avec un avertissement de classe sont en italique, et que la classe contient à la fois des éléments importants et des avertissements. ont également un fond argenté. Vous pouvez écrire :

Copiez le code

Le code est le suivant :

.important {font -weight:bold ;}.warning {font-weight:italic;}.important.warning {background:silver;}

2. En reliant deux sélecteurs de classe ensemble, Seuls les éléments contenant ces deux noms de classe peuvent être sélectionnés (dans n'importe quel ordre).

Si un sélecteur multi-classe contient un nom de classe qui ne figure pas dans la liste des noms de classe, la correspondance échouera. Veuillez consulter les règles ci-dessous :

Copiez le code


Le code est le suivant :

.important .urgent {fond :argent;}
Comme prévu, ce sélecteur ne correspondra qu'à p éléments dont l'attribut class contient les mots important et urgent. Par conséquent, si un élément p n’a que les mots important et warn dans son attribut de classe, il ne correspondra pas. Cependant, il peut correspondre aux éléments suivants :

Copier le code Le code est le suivant :

Ce paragraphe est un avertissement très important et urgent.