Pseudo-Klassen-Selektoren kennenlernen

Pseudo-Klassen-Selektoren sind CSS-Selektoren, denen ein Doppelpunkt vorangestellt ist. Sie sind wahrscheinlich mit einigen davon sehr vertraut. Wie :hover

a:hover {
  /* Yep, hover is a pseudo class */
}

Sie sind in einer Vielzahl von Situationen äußerst nützlich. Einige davon sind CSS3, einige CSS2… es hängt vom jeweiligen ab. Außerhalb von IE haben sie eine großartige Browserunterstützung. In IE, sogar IE8, ist die Unterstützung ziemlich spärlich. Die IE9-Vorschau hat jedoch volle Unterstützung dafür. Die linkbezogenen funktionieren, aber vieles andere nicht. Schauen wir uns jeden einzelnen kurz an. Keine Sorge, es sind nicht allzu viele.

Linkbezogene Pseudo-Klassen-Selektoren

:link – Wahrscheinlich der am meisten verwirrende linkbezogene Pseudo-Selektor. Sind nicht alle <a> Links? Nun, nicht, wenn sie kein href-Attribut haben. Dieser wählt nur diejenigen aus, die eines haben, und ist daher im Wesentlichen dasselbe wie a[href]. Dieser Selektor wird wesentlich nützlicher sein, wenn verlinken von beliebigen Elementen Wirklichkeit wird.

:visited – Wählt Links aus, die vom aktuellen Browser bereits besucht wurden.

:hover – Wenn der Mauszeiger über einen Link fährt, befindet sich dieser Link im Hover-Zustand und dieser wählt ihn aus.

:active – Wählt den Link aus, während er aktiviert wird (angeklickt oder anderweitig aktiviert). Zum Beispiel für den "gedrückten" Zustand eines Button-ähnlichen Links oder umallen Links ein button-ähnlicheres Gefühl zu geben.

Es gibt eine unterhaltsame Technik, um sich alle Link-Pseudo-Klassen-Selektoren zu merken. Schauen Sie sich den ersten Buchstaben jedes an: LVHA … LIEBE HASS.

Eingabe- & linkbezogene Pseudo-Klassen-Selektoren

:focus – Das Definieren von Hover-Stilen für Links ist großartig, aber es hilft denen nicht, die Tastaturnavigation verwendet haben, um zum Link zu gelangen. :focus wählt Links aus, die den aktuellen Fokus der Tastatur haben. Dies ist nicht auf Links beschränkt, sondern kann auch (und sollte wirklich) auf Eingaben und Textbereiche angewendet werden. Manche würden sagen, man solle einen :focus-Stil für alles definieren, das einen :hover-Stil hat.

:target – Die :target-Pseudo-Klasse wird in Verbindung mit IDs verwendet und stimmt überein, wenn das Hashtag in der aktuellen URL mit dieser ID übereinstimmt. Wenn Sie also unter der URL www.ihreseite.de/#home sind, dann ist der Selektor#home:targetwird übereinstimmen. Das kann extrem mächtig sein. Zum Beispiel können Sie einen Bereich mit Tabs erstellen, bei dem die Tabs auf Hashtags verlinken und dann die Panels durch übereinstimmende :target-Selektoren "aktiviert" werden und (zum Beispiel) mithilfe von z-index nach oben geschoben werden.

:enabled – Wählt Eingaben aus, die im Standardzustand aktiviert und zur Verwendung bereit sind.

:disabled – Wählt Eingaben aus, die dasdeaktiviertAttribut haben. Viele Browser machen die Eingabe verblasst grau, das können Sie mit diesem Selektor steuern.

:checked – Wählt Checkboxen aus, die, warten Sie, angekreuzt sind.

:indeterminate – Wählt Radio-Buttons aus, die sich im Fegefeuer-Zustand befinden, weder ausgewählt noch nicht ausgewählt (wie wenn eine Seite mit Radio-Button-Optionen geladen wird, aber kein Standard gesetzt ist).

:required – Wählt Eingaben mit dem required-Attribut aus.
:optional – Wählt Eingaben aus, die nicht das required-Attribut haben.

:read-only / :read-write – Wählt Elemente basierend auf einer Kombination von readonly- und disabled-Attributen aus.

Positions-/Nummern-basierte Pseudo-Klassen-Selektoren

:root – Wählt das Element aus, das sich an der Wurzel des Dokuments befindet. Wählt mit ziemlicher Sicherheit das -Element aus, es sei denn, Sie arbeiten speziell in einer seltsamen Umgebung, die auch CSS zulässt. Vielleicht XML.

:first-child – Wählt das erste Element innerhalb eines Elternelements aus.

:last-child – Wählt das letzte Element innerhalb eines Elternelements aus.

:nth-child() – Wählt Elemente basierend auf einem einfachen algebraischen Ausdruck aus (z. B. "2n" oder "4n-1"). Kann Dinge tun wie gerade/ungerade Elemente, "jeden dritten", "die ersten fünf" und ähnliches auswählen. Hier im Detail abgedeckt mit einem Tester-Tool.

:nth-of-type() – Funktioniert wie :nth-child, wird aber an Stellen verwendet, an denen die Elemente auf derselben Ebene unterschiedliche Typen haben. Zum Beispiel, wenn sich innerhalb eines Divs eine Reihe von Absätzen und eine Reihe von Bildern befinden. Sie möchten alle ungeraden Bilder auswählen. :nth-child funktioniert dort nicht, Sie würden div img:nth-of-type(odd)verwenden. Besonders nützlich bei der Arbeit mit Definitionslisten und ihren abwechselnden <dt>- und <dd>-Elementen.

:first-of-type – Wählt das erste Element dieses Typs innerhalb eines beliebigen Elternelements aus. Wenn Sie also zwei Divs haben, die jeweils einen Absatz, ein Bild, einen Absatz, ein Bild enthalten. Danndiv img:first-of-typewürde das erste Bild im ersten Div und das erste Bild im zweiten Div auswählen.

:last-of-type – Dasselbe wie oben, nur würde es das letzte Bild im ersten Div und das letzte Bild im zweiten Div auswählen.

:nth-last-of-type() – Funktioniert wie :nth-of-type, zählt aber von unten nach oben statt von oben.

:nth-last-child() – Funktioniert wie :nth-child, zählt aber von unten nach oben statt von oben.

:only-of-type – Wählt nur aus, wenn das Element das einzige seiner Art innerhalb des aktuellen Elternelements ist.

Relationale Pseudo-Klassen-Selektoren

:not() – Entfernt Elemente aus einer bestehenden Auswahl, die mit dem Selektor innerhalb des Parameters von :not() übereinstimmen. Also zum Beispiel alle Divs *außer* denen mit der Klasse "music" =div:not(.music). Die Spezifikation besagt, dass :not-Selektoren nicht verschachtelt werden können, aber sie können verkettet werden. Einige Browser (Firefox) unterstützen auch durch Kommas getrennte Selektoren als Selektorparameter, obwohl das Verketteln eine weitaus sicherere Wahl wäre. Auch nützlich in Verbindung mit Attributselektoren, z. B.input:not([disabled]).

:empty – Wählt Elemente aus, die keinen Text und keine Kindelemente enthalten. Wie:

Textbezogene Pseudo-Klassen-Selektoren / Elemente

::first-letter – Wählt den ersten Buchstaben des Textes im Element aus. Typische Verwendung: Drop Caps.

::first-line – Wählt die erste Textzeile im Element aus. Typische Verwendung: Die erste Zeile in Kleinschreibung als typografischer Blickfang/Einleitung.

:lang – Dieser Pseudo-Selektor ist in der CSS3-Spezifikation enthalten, wird aber erst ab IE 8+ implementiert. Er passt zu allem, was ein Element mit einem übereinstimmenden lang-Attribut hat oder ein Nachfahre davon ist. Zum Beispiel passt :lang(fr) zu jedem Absatz, auch ohne lang-Attribut, wenn das übergeordnete Body-Element das Attribut lang="fr" hatte.

Kurzer Hinweis

Sie können Pseudo-Selektoren verketteln, genau wie Sie Klassen- und ID-Selektoren verketteln können. Dies ist hier besonders nützlich, während wir uns :first-letter und :first-line ansehen. Wahrscheinlich möchten Sie nicht jeden einzelnen Absatz auf der Seite als Drop Cap gestalten, sondern nur den ersten, also p:first-child:first-letter { }

Inhaltbezogene Pseudo-"Elemente"

::before – Kann Inhalt vor einem bestimmten Element hinzufügen. Zum Beispiel ein öffnendes Zitat vor einem Blockquote oder vielleicht ein vorausgehendes Bild, um einen bestimmten Absatz hervorzuheben.

::after – Kann Inhalt nach einem bestimmten Element hinzufügen. Zum Beispiel ein schließendes Zitat für einen Blockquote. Wird auch häufig für den Clearfix verwendet, bei dem nach dem Element ein leerer Raum hinzugefügt wird, der den Float ohne zusätzlichen HTML-Markup bereinigt.

Pseudo-Elemente vs. Pseudo-Klassen

Die beiden obigen Selektoren werden zu Recht Pseudo-"Elemente" (nicht Selektoren) genannt, da sie kein "reales" Element auswählen, das auf der Seite existiert. Dies gilt für diese beiden sowie für die vorherigen Abschnitte ::first-letter und ::first-line. Macht das Sinn? Wie der erste Buchstabe, den ::first-letter auswählt, ist kein eigenes Element, sondern nur ein Teil eines vorhandenen Elements, daher ein Pseudo-Element.

Selektorstil	Name	Tut	Spezifität
::	Pseudo Element	wählt/erstellt tatsächlichen Inhalt aus	0 0 0 1
:	Pseudo Klasse	wählt Elemente unter bestimmten Bedingungen aus	0 0 1 0

Tag-Qualifizierung

Diese Selektoren können tag-qualifiziert sein, was bedeutet, dass sie nur angewendet werden, wenn *sowohl* das Element (Tag) als auch der Selektor übereinstimmen. Zum Beispiel

p:first-child {
  color: red;
}

Das passt nur, wenn das erste Kind eines anderen Elements ein <p> ist. Wenn nicht, passt es nicht.

Veraltet

:contains() – Soweit ich weiß, ist das weg. Die aktuelle CSS3-Spezifikation hat es entfernt. Ich kenne die Geschichte nicht, lassen Sie es mich wissen, wenn Sie es tun. Auf den ersten Blick wirkt es unglaublich nützlich (Objekte basierend auf dem Textinhalt, den sie enthalten, auswählen zu können). Möglicherweise liegt es an Problemen oder daran, dass Inhalt in Selektoren unerwünscht ist. Meine Präferenz wäre, es nach Elementen statt nach Text auswählen zu lassen, wie p:contains(img), aber leider Pech gehabt.

Update: Es gibt jetzt einen :has()-Selektor!

::selection – Ermöglicht die Änderung des Stils von ausgewähltem Text. Es wurde für CSS Selectors Level 3 entworfen, aber entfernt, bevor es den Empfehlungsstatus erreichte. Trotzdem ist es in einigen Browsern implementiert, die wahrscheinlich experimentelle Unterstützung dafür beibehalten werden. Für Firefox können Sie ::-moz-selection verwenden. Weitere Informationen hier.

Update: ::selection ist jetzt vollständig standardisiert, verwenden Sie es ruhig!

jQuery-Nutzung

jQuery kann all diese in seinen Selektoren verwenden, was großartig ist. Noch *großartiger*, jQuery bietet zusätzliche Pseudo-Klassen-Selektoren.

:first – Passt zur ersten Instanz der *bereits ausgewählten* Menge. Dies unterscheidet sich von :nth-child(1), das nur auswählt, wenn der Selektor passt *und* es das erste Kind ist. Mit :first passt der Selektor, dann nimmt er die erste gefundene Instanz, unabhängig von der Position des Kindes.

:eq() – jQuery unterstützt :nth-of-type nicht als Teil seiner Selektor-Engine, aber das ist sehr ähnlich.Das tut es jetzt. Dies wählt das X-te Element aus der bereits ausgewählten Menge aus. Es ist auch nullindiziert (0 ist das erste Element), im Gegensatz zu :nth-child, bei dem das erste Element 1 ist.

:contains('text') – Dies wurde aus CSS entfernt, funktioniert aber in jQuery.

:lt() – Dasselbe wie :nth-child(-n+X), da es die "ersten X Elemente" auswählt

:gt() – Dasselbe wie :nth-child(n+X), da es alles außer den "ersten (X-1) Elementen" auswählt

:even – Dasselbe wie :nth-child(even) oder :nth-child(2n)

:odd – Dasselbe wie :nth-child(odd) oder :nth-child(2n+1)

:has() – Prüft, ob das Element einen Nachfahren eines bestimmten Selektors hat, bevor es passt, wie :has("div.intro").

Es gibt tatsächlich noch eine ganze Menge mehr, und alle sind clever und nützlich (oder zumindest eine Verbesserung der Lesbarkeit). Sehen Sie sich die Selektor-Dokumentation für mehr an.

jQuery kann Ihnen bei Pseudo-Elementen wie ::before und ::after nicht wirklich helfen, aber Sie können in einigen Browsern auf ihre Werte zugreifen. Zum Beispiel, wenn ein Div einen ::before-generierten Inhalt hätte, könnten Sie den Wert wie folgt abrufen:

var div = document.querySelector("div");

var content = window
  .getComputedStyle(div, '::before')
  .getPropertyValue('content');

Spezifität

Klassen-Selektoren und Pseudo-Klassen-Selektoren haben das gleiche Spezifitätsgewicht. Pseudo-Elemente haben die Spezifität eines Element-Selektors.

li             {} /* specificity = 0,0,0,1 */
li:first-child {} /* specificity = 0,0,1,1 */
li:first-line  {} /* specificity = 0,0,0,2 */
li.red         {} /* specificity = 0,0,1,1 */

Typischerweise werden sie sowieso in Verbindung verwendet oder am Ende in CSS aufgeführt, also hoffentlich wird es nicht zu viele Probleme verursachen...

ul li.friend { margin: 0 0 5px 0; }
ul li:last-child { margin: 0; }

In diesem Fall würde das Nullsetzen des Margins funktionieren (vorausgesetzt, es passt zum gleichen Element), aber nur, weil das Nullsetzen an zweiter Stelle steht (sie haben die gleiche Spezifität). Also… achten Sie darauf.