Die Klassenauswahl

Wir haben uns zuvor Elementselektoren angesehen, die alle Elemente (die normalerweise in HTML-Tags übersetzt werden) auf einer Seite zum Ziel haben. Wenn wir genauer sein wollen, ist die Klassenauswahl der nächste Schritt. Anstatt auf alle Elemente mit einem bestimmten Namen abzuzielen, zielen sie auf alle Elemente ab, für die ein bestimmter Klassenname angegeben wurde.

Dadurch wird die Liste der Ziele normalerweise zwar enger, Sie haben jedoch die Möglichkeit, Elemente verschiedener Typen (z. B. fett und kursiv zugleich) als Ziel festzulegen. Bei einem Klassenselektor ist der Elementtyp/-name nicht mehr der wichtige Teil.

Ein Klassenselektor sieht genauso aus wie ein Elementselektor, aber anstatt Namen zu verwenden, die mit den Namen von HTML-Elementen verknüpft sind, erstellen Sie den Namen und dann stellen Sie einen Punkt (.) voran. Zum Beispiel:

• .red { }
• .myElements { }
• .navigation { }

Es wird nur auf Elemente abgezielt, die einen oder mehrere dieser Klassennamen verwenden. Lassen Sie mich anhand eines Beispiels veranschaulichen, wie das funktioniert:

<style type="text/css">  
.red {  
    color: Red;  
}  

.beautiful {  
    font-weight: bold;  
    color: Blue;  
    font-style: italic;  
}  
</style>  

<p class="red">  
    Here's some text - <span class="beautiful">this part is especially pretty!</span>  
</p>

This text is very normal!

Probieren Sie das Beispiel aus und überzeugen Sie sich vom Ergebnis. Beachten Sie, dass zwei ähnliche Absatzelemente jetzt völlig anders aussehen, weil wir eine klasse zum ersten Beispiel hinzugefügt haben.

Beachten Sie auch, dass ich die Selektoren benennen kann, wie ich möchte - die beiden Namen sind tatsächlich ein gutes Beispiel für schlechte und gute (oder zumindest bessere) Benennungen bzw. Konventionen. Der Name "rot" ist kein guter Name, da die Regel leicht mehr als die farbbezogene Regel enthalten könnte oder die Farbe leicht geändert sein könnte in einem Re-Design von rot nach blau. Der letztere Name ist besser, weil er allgemeiner ist und keine bestimmte Farbe oder Optik vermittelt.

Elementspezifische Klassen

In unserem ersten Beispiel könnten alle Elementtypen unsere Klassen verwenden. In einigen Situationen möchten Sie die Verwendung möglicherweise auf einen bestimmten Elementtyp beschränken. Dies wird normalerweise durchgeführt, um anzugeben, wie die Klasse verwendet werden soll, um mehr als eine Klasse mit demselben Namen zuzulassen und Konflikte zu vermeiden. Elementspezifische Klassen werden einfach verwendet, indem der Klassenname wie folgt an den Elementnamen in Ihrer Auswahl angehängt wird:

<style type="text/css">
span.beautiful {
    font-weight: bold;
    color: Blue;
    font-style: italic;
}
</style>

<p>
    Here's some <b class="beautiful">text</b> - <span class="beautiful">this part is especially pretty!</span>
</p>

Probieren Sie das Beispiel aus und stellen Sie fest, dass die Klasse beautiful zwar an zwei Stellen verwendet wird, jedoch nur für das span-Element funktioniert, da dies jetzt erforderlich ist.

Mehrere Klassen

Klassen sind nicht eindeutig und die Klasseneigenschaft eines HTML-Tags ermöglicht es Ihnen, mehr als eine Klasse anzugeben. Das Coole daran ist, dass Sie die Regeln für mehrere Selektoren kombinieren und für dasselbe Tag verwenden können, wie Sie möchten.

Dies bedeutet auch, dass Sie, anstatt Selektoren mit vielen Regeln zu schreiben und dann nur auf wenige Elemente abzuzielen, weniger spezifische Selektoren schreiben und diese bei Bedarf einfach kombinieren können. Dies ermöglicht eine bessere Wiederverwendbarkeit, worum es in CSS wirklich geht.

Schauen Sie sich dieses Beispiel an:

<style type="text/css">
.status {
    padding: 5px;
    margin: 5px;
    border-width: 1px;
    border-style: solid;
}

.error {
    color: Red;
    border-color: Maroon;
}

.information {
    color: Blue;
    border-color: Navy;
}
</style>

<div class="status error">
    This is an error!
</div>

<div class="status information">
    This is information!
</div>

Hier verwenden wir CSS, um Statusinformationen anzuzeigen. Wir haben einen gemeinsamen .status-Selektor und dann einen Selektor für Fehlermeldungen und einen für Informationsmeldungen. Fehler- und Informationsnachrichten haben offensichtlich etwas gemeinsam, da sie beide eine Art von Nachrichten sind, aber auch ein unterschiedliches Aussehen haben. Wir ordnen das gemeinsam genutzte Material einer Klasse mit dem Namen .status zu und ordnen den Rest in verschiedene Klassen mit den Namen .error und .information ein. Anschließend verwenden wir sie für die div-Tags, indem wir ihre Namen einfach durch ein Leerzeichen trennen....

Ohne die gemeinsame .status-Klasse müssten wir alle Eigenschaften für jede Klasse wiederholen, was eine Verschwendung von Bandbreite wäre und uns zwingen würde, die Daten an mehreren Stellen zu ändern, wenn wir dickere Ränder oder ähnliches wünschen.

Zusammenfassung

Wie gezeigt, sind CSS-Klassen sehr vielseitig - sie können so spezifisch oder unspezifisch sein, wie Sie möchten, und Sie können sie für alle Arten von Elementen verwenden oder nicht, je nachdem, ob das Element auf die Klasse verweist oder nicht. Dies macht Klassen zum flexibelsten Selektortyp, den Sie in CSS verwenden können. Im nächsten Kapitel werden wir uns die ID-Auswahl ansehen, die noch genauer ist.