Das globale class-Attribut ist eine durch Leerzeichen getrennte Liste von Registern der abhängigen Klassen des Elements. Klassen ermöglichen die Auswahl und den Zugriff von CSS und Javascript mithilfe von Klassenselektoren oder Funktionen wie den DOM-Methoden document.getElementsByClassName. Entwickler verwenden ständig das class-Attribut. Dies erleichtert nicht nur das Styling, sondern hilft Ihnen auch dabei, Ihren Code besser zu organisieren und ihn einfacher zu warten.
Beispiel 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>
Einem Element können, getrennt durch Leerzeichen, eine oder mehrere Klassen zugeordnet werden.
Beispiel 2
<!-- Eine Klasse --> <div class="container"> <!-- ... --> </div> <!-- Mehrere Klassen --> <div class="container special-box"> <!-- ... --> </div>
Beispiel 3
.highlighted-text {
background-color: yellow;
font-size: 18px;
}</pre>
<span class="highlighted-text">Dieser Text wird hervorgehoben.</span>
Beispiel 4
const elements = document.querySelectorAll('.clickable');
elements.forEach(element => {
element.addEventListener('click', () => {
alert('Weinen!');
});
});
<button class="click">Nächste</button>
Komplexe Selektoren in CSS: In manchen Fällen müssen wir eine Klasse nur auf ein bestimmtes HTML-Tag anwenden und alle anderen ignorieren.
Beispiel 5
/* Nur Elemente <p> mit Klasse special-text */
p.special-text {
color: blue;
}
<p class="special-text">Dieser Text wird blau sein.</p>
<div class="special-text">Und dieser wird unverändert bleiben.</div>
