Sélecteur CLASS

Rôle

Le sélecteur class, désigné par le point . permet de cibler les éléments de la page par le nom de leur class

En HTML, la class est défini par l’attribut class. Contrairement à l’attribut id, des éléments HTML différents peuvent avoir le même nom de class.

Une class est souvent utilisée pour créer une caractèristique graphique qu’on pourra appliquer à des objets differents. Si, par exemple, on fait une comparaison avec les êtres humains, la caractèristique « yeux bleus » serait définie par une class puisqu’elle peut se retrouver sur plusieurs personnes différentes

Le code ci dessous montre deux éléments HTML identifiés différemment ayant la même valeur de class.

<input type="text" id="pseudo" class="sansBordure">
<textarea id="message" class="sansBordure"></textarea>

Utilisation du sélecteur CLASS

.sansBordure {
    border: none;
}

Note : un élément HTML peut être associé à plusieurs class CSS. Il suffit de séparer, dans la valeur de l’attribut class en HTML, le nom de chaque class CSS par un espace.

Les class en CSS

.fondBleu {
    backgound-color: blue;
}
.sansMarge {
    margin: 0;
}

Appel de plusieurs class.

<p class="fondBleu sansMarge"> lorem ipsum </p>

Testez vous-même ce sélecteur

Utilisez Codepen.

– Le code CSS

.sansBordure{
  border: none;
  background-color: silver;
}

– Le code HTML

<form action="">
  <label for="pseudo">Pseudo : < /label>< br>
  <input type="text" id="pseudo" class="sansBordure" /> < br>
  <label for="message">Message : <br>
  <textarea name="" id="message" class="sansBordure">< /textarea> < br>
  <input type="button" value='ok' />
  <input type="reset" />
</form>

Résultat

Dans cet exemple, on supprime les bordures des éléments HTML contenant la class ‘sansBordure’.

Compatibilité

Le sélecteur class est pris en charge par tous les principaux navigateurs

A voir aussi

#id (sélecteur id)
p (sélecteur balise)
#head p>em (sélecteur contextuel)
p,h1 (sélecteur multiple)
* (sélecteur universel)
p a (sélecteur descendant)
p>a (sélecteur enfant)
[] (sélecteur d’attribut)
[attribut=valeur]
[attribut~=valeur]
[attribut|=valeur]
[attribut^=valeur]
[attribut$=valeur]
[attribut*=valeur]
h1+p (sélecteur adjacent)
h1~p (sélecteur de proximité)