L’attribut de classe global est une liste de registres séparés par des espaces des classes dépendantes de l’élément. Les classes permettent la sélection et l’accès CSS et Javascript à l’aide de sélecteurs de classe ou de fonctions telles que les méthodes DOM document.getElementsByClassName. Les développeurs utilisent l’attribut class tout le temps. Non seulement cela facilite le style, mais cela vous aide également à mieux organiser votre code et à le rendre plus facile à maintenir.
Exemple 1
<p class="note editorial">Above point sounds a bit obvious. Remove/rewrite?</p> <p>Narrator: I must warn you now folks that this beginning is very exciting.</p> <p class="note">[Lights go up and wind blows; Caspian enters stage right]</p>
Une ou plusieurs classes peuvent être affectées à un élément, séparées par des espaces.
Exemple 2
<!-- Une classe --> <div class="container"> <!-- ... --> </div> <!-- Plusieurs cours --> <div class="container special-box"> <!-- ... --> </div>
Exemple 3
.highlighted-text {
background-color: yellow;
font-size: 18px;
}
<span class="highlighted-text">Ce texte sera mis en évidence.</span>
Exemple 4
const elements = document.querySelectorAll('.clickable');
elements.forEach(element => {
element.addEventListener('click', () => {
alert('click!');
});
});
<button class="click">Suivant</button>
Sélecteurs complexes en CSS: dans certains cas, nous devons appliquer une classe uniquement à une balise HTML spécifique, en ignorant toutes les autres.
Exemple 5
/* Uniquement pour les éléments <p> avec classe special-text */
p.special-text {
color: blue;
}
<p class="special-text">Ce texte sera bleu.</p>
<div class="special-text">Et celui-ci restera inchangé.</div>
