Selektoren

Denken Sie daran, dass Deklarationen ein grundlegender Teil von CSS sind, da sie einem ausgewählten Element einen Stil zuweisen. Aber wie entscheiden Sie, welche Elemente den Stil erhalten? Mit einem Selektor.

Ein Selektor wird verwendet, um die spezifischen HTML-Elemente auszuwählen, die durch die Deklaration formatiert werden sollen. Ein Selektor, mit dem Sie vielleicht bereits vertraut sind, ist der Typselektor. Wie der Name schon sagt, entspricht der Typselektor dem Typ des Elements im HTML-Dokument.

In der vorherigen Lektion haben Sie die Farbe eines Absatzelements geändert.

Sie haben gelernt, wie der Typselektor alle Elemente eines bestimmten Typs auswählt. Der Universalselektor wählt alle Elemente eines beliebigen Typs aus.

Das Ansprechen aller Elemente auf der Seite hat einige spezielle Anwendungsfälle, wie z. B. das Zurücksetzen des Standard-Browser-Stylings oder das Auswählen aller untergeordneten Elemente eines übergeordneten Elements. Machen Sie sich keine Sorgen, wenn Sie die Anwendungsfälle jetzt nicht verstehen, wir werden später in unserer CSS-Lernreise darauf eingehen.

Der universelle Selektor verwendet das Zeichen * an derselben Stelle, an der Sie den Typselektor in einem Regelsatz angegeben haben, und zwar wie folgt:

CSS ist nicht darauf beschränkt, Elemente nach ihrem Typ auszuwählen. Wie Sie wissen, können HTML-Elemente auch Attribute haben. Beim Arbeiten mit HTML und CSS ist ein Klassenattribut eine der gängigsten Möglichkeiten, ein Element auszuwählen.

Betrachten Sie beispielsweise das folgende HTML:

Das Absatzelement im obigen Beispiel hat ein Klassenattribut innerhalb des öffnenden Tags des <p>-Elements. Das Klassenattribut ist auf „Brand“ eingestellt. Um dieses Element mit CSS auszuwählen, können wir einen Regelsatz mit einem Klassenselektor von .brand erstellen.

Wir können CSS verwenden, um das Klassenattribut eines HTML-Elements nach Namen auszuwählen. Und bisher haben wir Elemente mit nur einem Klassennamen pro Element ausgewählt. Wenn jedes HTML-Element eine einzelne Klasse hätte, würden alle Stilinformationen für jedes Element eine neue Klasse erfordern.

Glücklicherweise ist es möglich, dem Klassenattribut eines HTML-Elements mehr als einen Klassennamen hinzuzufügen.

Beispielsweise gibt es vielleicht ein Überschriftenelement, das grün und fett sein muss. Sie könnten zwei CSS-Regelsätze wie folgt schreiben:

Anschließend können Sie beide Klassen in ein HTML-Element einbinden, und zwar wie folgt:

Oft ist es wichtig, ein einzelnes Element mit CSS auszuwählen, um ihm seinen eigenen, einzigartigen Stil zu verleihen. Wenn ein HTML-Element einzigartig gestaltet werden muss, können wir ihm mit dem id-Attribut eine ID zuweisen.

Im Gegensatz zu einer Klasse, die mehrere Werte akzeptiert und in einem HTML-Dokument breit verwendet werden kann, kann die ID eines Elements nur einen einzigen Wert haben und nur einmal pro Seite verwendet werden.

Um die ID eines Elements mit CSS auszuwählen, stellen wir dem ID-Namen ein Nummernzeichen (#) voran. Wenn wir beispielsweise das HTML-Element im obigen Beispiel auswählen möchten, würde es folgendermaßen aussehen:

Sie erinnern sich vielleicht, dass einige HTML-Elemente Attribute verwenden, um dem Element zusätzliche Details oder Funktionen hinzuzufügen. Einige bekannte Attribute sind möglicherweise href und src, aber es gibt noch viele weitere – einschließlich class und id!

Mit dem Attributselektor können HTML-Elemente angesprochen werden, die bereits Attribute enthalten. Elemente desselben Typs können anhand ihres Attributs oder Attributwerts unterschiedlich angesprochen werden. Dadurch muss kein neuer Code hinzugefügt werden, wie etwa die Attribute „class“ oder „ID“.

Attribute können ähnlich wie Typen, Klassen und IDs ausgewählt werden:

Die einfachste Syntax ist ein Attribut in eckigen Klammern. Im obigen Beispiel würde [href] alle Elemente mit einem href-Attribut ansprechen und die Farbe auf Magenta setzen.

Und von dort aus kann es noch detaillierter werden, indem Typ- und/oder Attributwerte hinzugefügt werden. Eine Möglichkeit ist die Verwendung von type[attribute*=value]. Kurz gesagt wählt dieser Code ein Element aus, bei dem das Attribut eine beliebige Instanz des angegebenen Werts enthält. Sehen wir uns ein Beispiel an:

Der obige HTML-Code rendert zwei <img> Elemente, die jeweils ein src-Attribut mit einem Wert enthalten, der einem Link zu einer Bilddatei entspricht.

Möglicherweise haben Sie beobachtet, wie sich das Erscheinungsbild bestimmter Elemente nach bestimmten Benutzerinteraktionen ändern oder in einem anderen Zustand sein kann. 

Zum Beispiel:

• Wenn Sie auf ein <input>-Element klicken, wird ein blauer Rahmen hinzugefügt, der anzeigt, dass es im Fokus ist.

• Wenn Sie auf einen blauen <a>-Link klicken, um eine andere Seite zu besuchen, der Text des Links bei der Rückkehr jedoch violett ist.

• Wenn Sie ein Formular ausfüllen und die Schaltfläche „Senden“ ausgegraut und deaktiviert ist. Wenn jedoch alle Felder ausgefüllt wurden, zeigt die Farbe der Schaltfläche an, dass sie aktiv ist.

Dies sind alles Beispiele für Pseudoklassenselektoren in Aktion! Tatsächlich sind :focus, :visited, :disabled und :active alles Pseudoklassen. Faktoren wie Benutzerinteraktion, Site-Navigation und Position im Dokumentbaum können Elementen mit Pseudoklassen einen anderen Status verleihen.

Eine Pseudoklasse kann an jeden Selektor angehängt werden. Sie wird immer als Doppelpunkt : gefolgt von einem Namen geschrieben. Zum Beispiel p:hover.

Spezifität ist die Reihenfolge, in der der Browser entscheidet, welche CSS-Stile angezeigt werden. Eine bewährte Vorgehensweise bei CSS besteht darin, Elemente mit dem geringsten Grad an Spezifität zu formatieren, sodass ein Element, wenn es einen neuen Stil benötigt, leicht überschrieben werden kann.

IDs sind der spezifischste Selektor in CSS, gefolgt von Klassen und schließlich dem Typ. Betrachten Sie beispielsweise das folgende HTML und CSS:

Im obigen Beispielcode würde die Farbe der Überschrift auf Firebrick gesetzt, da der Klassenselektor spezifischer ist als der Typselektor. Wenn dem obigen Code ein ID-Attribut (und ein Selektor) hinzugefügt würde, würden die Stile im Hauptteil des ID-Selektors alle anderen Stile für die Überschrift überschreiben.

Wenn die Dateien mit der Zeit immer mehr Code enthalten, verfügen viele Elemente möglicherweise über IDs. Dies kann die Bearbeitung von CSS erschweren, da zum Ändern des Stils eines Elements ein neuer, spezifischerer Stil erstellt werden muss.

Um Stile einfach bearbeiten zu können, verwenden Sie am besten, wenn möglich, einen Typselektor. Wenn nicht, fügen Sie einen Klassenselektor hinzu. Wenn das nicht spezifisch genug ist, sollten Sie die Verwendung eines ID-Selektors in Betracht ziehen.

Beim Schreiben von CSS-Regeln kann verlangt werden, dass ein HTML-Element zwei oder mehr CSS-Selektoren gleichzeitig hat.

Dies wird durch die Kombination mehrerer Selektoren erreicht, was wir als Verkettung bezeichnen. Wenn es beispielsweise eine special Klasse für <h1>-Elemente gäbe, würde das CSS wie folgt aussehen:

Neben der Verkettung von Selektoren zur Auswahl von Elementen unterstützt CSS auch die Auswahl von Elementen, die in anderen HTML-Elementen verschachtelt sind, auch Nachkommen genannt. Betrachten Sie beispielsweise das folgende HTML:

Die verschachtelten <li>-Elemente sind Nachkommen des <ul>-Elements und können mit dem Nachkommenkombinator wie folgt ausgewählt werden:

Wenn Sie einem CSS-Selektor mehr als ein Tag, eine Klasse oder eine ID hinzufügen, erhöht sich die Spezifität des CSS-Selektors.

Betrachten Sie beispielsweise das folgende CSS:

Um CSS prägnanter zu gestalten, können Sie mehreren CSS-Selektoren gleichzeitig CSS-Stile hinzufügen. Dadurch wird das Schreiben von sich wiederholendem Code vermieden.

Beispielsweise weist der folgende Code sich wiederholende Stilattribute auf:

Anstatt font-family: Georgia zweimal für zwei Selektoren zu schreiben, können wir die Selektoren durch ein Komma trennen, um auf beide den gleichen Stil anzuwenden, wie folgt: