Überprüfen von Selektoren

  • 5 Minuten

CSS-Selektoren werden verwendet, um die Elemente auszuwählen, auf die eine Formatvorlage angewendet werden soll. Selektoren bieten ein hohes Maß an Flexibilität und Leistungsfähigkeit. Sie ermöglichen die Anwendung einer Formatvorlage auf alle oder ein bestimmtes Element und sogar auf einen bestimmten Buchstaben.

Es gibt drei Haupttypen von Selektoren:

  • Elemente
  • Klassen
  • Ids

Mithilfe dieser Selektoren können Sie Formatvorlagen auf viele oder ein paar Elemente anwenden.

Element-Selektoren

Ein Elementselektor gilt für alle Elemente mit diesem Tag. Jedes HTML-Element kann als Elementselektor verwendet werden. Sie können h1 verwenden, um alle h1-Elemente auf der Seite zu ändern.

h1 {
    /* style */
}

Klassen-Selektoren

Mit allen HTML-Elementen können Sie ein class-Attribut hinzufügen. class wird zum Gruppieren von Elementen verwendet und ermöglicht es Ihnen, die Elemente für die Anwendung von CSS-Einstellungen zu markieren.

Wenn Sie einen Lebenslauf erstellen, haben Sie Abschnitte für Ihre Ausbildung und Ihren beruflichen Werdegang. Mit einer Klasse können Sie diese Elemente mit derselben Formatvorlage formatieren.

<div class="history">
    <h2>Employer name</h2>
    <h3>Job title</h3>
    <h3>3 Jun 19 - 8 Jun 21</h3>
</div>

<div class="history">
    <h2>School name</h2>
    <h3>Major</h3>
    <h3>Sep 2014 - May 2018</h3>
</div>

Im obigen Beispiel soll die Formatierung für alle div-Elemente identisch sein, da sie ähnliche Informationstypen darstellen. Wenn Sie die beiden div-Elemente mit der gleichen Klasse markieren, können Sie jeweils dieselbe CSS-Formatvorlage anwenden.

Um eine Klasse in CSS zu identifizieren, setzen Sie einen . vor den Namen. In diesem Beispiel verwenden Sie .history.

.history {
    /* your styles */
}

Wenn Sie eine CSS-Datei verwenden, schreiben Sie die Definition für die Klassenformatvorlage in die CSS-Datei. Das Klassenattribut in HTML verweist auf die Definition aus der CSS-Datei.

Pseudoklassen

Pseudoklassen ermöglichen es Ihnen, Elemente basierend auf ihrer Position auf einer Seite oder der Interaktion von Benutzer*innen damit zu identifizieren.

Wenn ein Benutzer mit einer Webseite interagiert, ändert sich der Status verschiedener Elemente. Wenn sie den Mauszeiger über ein Element bewegen, soll die Farbe des Elements geändert werden. Oder wenn der Benutzer einen Link ausgewählt hat. Nachdem sie diesen Link besucht haben, können Sie sie darüber informieren, indem Sie den Stil ändern. CSS unterstützt viele Pseudoklassen, die dynamisch basierend auf dem, was der Benutzer tut oder getan hat, angewendet werden. Pseudoklassen haben das Präfix : und werden hinter einem anderen Selektor platziert.

Sie können beispielsweise das folgende CSS verwenden, damit die Hintergrundfarbe eines Links gelb wird, wenn Benutzer*innen mit dem Cursor darauf zeigen:

a:hover {
    background-color: yellow;
}

Einige der gängigsten Pseudoklassen sind in der folgenden Tabelle aufgeführt:

Pseudoklasse BESCHREIBUNG
hover Die Benutzer*innen bewegen den Cursor über ein Element.
visited Ein Link, auf den zuvor geklickt wurde
link Link, auf den noch nicht geklickt wurde
first-child Das erste untergeordnete Element, das dem Selektor in einer Hierarchie entspricht
last-child Das letzte untergeordnete Element, das dem Selektor in einer Hierarchie entspricht

Wichtig

Mithilfe von Pseudoelementen und CSS können Sie die Unterstreichung von Hyperlinks entfernen. In der Regel ist es am besten, die Unterstreichung für Zugriffszwecke beizubehalten. Der unterstrichene Text ermöglicht es Benutzer*innen, Links auf einer Seite schnell zu identifizieren.

ID-Selektoren

Ähnlich wie bei Klassen können Sie mit einer ID eine Formatvorlage auf ein Element anwenden. Während eine Klasse auf mehrere Elemente angewendet werden kann, muss eine ID eindeutig sein und darf nur auf ein Element verweisen.

Ihr Lebenslauf enthält möglicherweise einen Abschnitt zu Social Media (z. B. X, GitHub oder Ihr Blog). Wenn Sie eine benutzerdefinierte Formatvorlage für diesen Abschnitt verwenden möchten, können Sie eine ID festlegen:

<div id="social-media">
    <!-- list of links -->
</div>

In CSS wird IDs ein # vorangestellt:

#social-media {
    /* style */
}

Hinweis

Die Standardnamenskonvention für Klassen und IDs besteht in der Verwendung der „Hyphen-Case“-Schreibweise. Alle Wörter sind klein geschrieben und werden durch ein - getrennt. Die Bezeichnung kommt daher, dass die Wörter mit Bindestrichen (Hyphens) verbunden sind.