CSS Selectors Spickzettel

In CSS sind Selektoren Muster, mit denen DOM-Elemente ausgewählt werden.

Hier ist ein Beispiel für die Verwendung von Selektoren. Im folgenden Code aund h1sind Selektoren:

a { color: black; } h1 { font-size 24px; }

Spickzettel der gängigen Selektoren

headwählt das Element mit dem headTag aus

.red wählt alle Elemente mit der Klasse 'rot' aus

#nav wählt die Elemente mit der ID 'nav' aus

div.rowWählt alle Elemente mit dem divTag und der Klasse 'row' aus

["]wählt alle Elemente mit dem aria-hiddenAttribut mit dem Wert "true" aus

  • Platzhalterauswahl. Wählt alle DOM-Elemente aus. Siehe unten für die Verwendung mit anderen Selektoren

Wir können Selektoren auf interessante Weise kombinieren

Einige Beispiele:

li aDOM-Nachkommen-Kombinator. Alle aTags, die liTags untergeordnet sind

div.row *Wählt alle Elemente aus, die von den Elementen mit divTag und 'row'-Klasse abstammen (oder untergeordnet sind)

li > aDifferenzkombinator. Wählen Sie direkte Nachkommen anstelle aller Nachkommen wie der Nachkommen-Selektoren

li + aDer benachbarte Kombinator. Es wählt das Element aus, dem das vorherige Element unmittelbar vorausgeht. In diesem Fall nur der erste anach jedem li.

li, aWählt alle aElemente und alle liElemente aus.

li ~ aDer Geschwisterkombinator. Wählt ein aElement aus, das einem liElement folgt .

Pseudoselektoren oder Pseudostrukturklassen

Diese sind auch nützlich für die Auswahl von Strukturelementen aus dem DOM.

Hier sind einige davon:

:first-child Zielen Sie auf das erste Element unmittelbar innerhalb (oder untergeordnet) eines anderen Elements

:last-child Zielen Sie auf das letzte Element unmittelbar innerhalb (oder untergeordnet) eines anderen Elements

:nth-child()Zielen Sie auf das n-te Element unmittelbar innerhalb (oder untergeordnet) eines anderen Elements. Zugibt , ganze Zahlen, even, odd, oder Formeln

a:not(.name)Wählt alle aElemente aus, die nicht zur .nameKlasse gehören

::afterErmöglicht das Einfügen von Inhalten in eine Seite aus CSS anstelle von HTML. Das Endergebnis befindet sich zwar nicht im DOM, wird jedoch auf der Seite so angezeigt, als ob es sich um ein solches handelt. Dieser Inhalt wird nach HTML-Elementen geladen.

::beforeErmöglicht das Einfügen von Inhalten in eine Seite aus CSS anstelle von HTML. Das Endergebnis befindet sich zwar nicht im DOM, wird jedoch auf der Seite so angezeigt, als ob es sich um ein solches handelt. Dieser Inhalt wird vor HTML-Elementen geladen.

Wir können Pseudoklassen verwenden, um einen speziellen Zustand eines Elements des DOM zu definieren. Aber sie zeigen nicht auf ein Element für sich.

Einige Beispiele:

:hover Wählt ein Element aus, das von einem Mauszeiger bewegt wird

:focus Wählt ein Element aus, das den Fokus von der Tastatur oder programmgesteuert erhält

:active Wählt ein Element aus, auf das mit einem Mauszeiger geklickt wird

:link Wählt alle Links aus, auf die noch nicht geklickt wurde

:visited Wählt einen Link aus, auf den bereits geklickt wurde

Weitere Informationen zur Auswahl des n-ten Kindes

Der nth-childSelektor ist eine CSS-Pseudoklasse, die ein Muster verwendet, nach dem ein oder mehrere Elemente in Bezug auf ihre Position unter Geschwistern übereinstimmen.

Syntax

 a:nth-child(pattern) { /* Css goes here */ }

Muster

Die von akzeptierten Muster nth-childkönnen in Form von Schlüsselwörtern oder einer Gleichung der Form An + B vorliegen.

Schlüsselwörter

Seltsam

Odd gibt alle ungeraden Elemente eines bestimmten Typs zurück.

 a:nth-childe(odd) { /* CSS goes here */ }
Sogar

Even gibt alle geraden Elemente eines bestimmten Typs zurück.

 a:nth-childe(even) { /* CSS goes here */ }

An + B.

Gibt alle Elemente zurück, die der Gleichung An + B für jeden positiven ganzzahligen Wert von n entsprechen (zusätzlich zu 0).

Zum Beispiel stimmt Folgendes mit jedem dritten Ankerelement überein:

 a:nth-childe(3n) { /* CSS goes here */ }

Spiele

CSS Diner ist ein Web-Spiel, das fast alles lehrt, was man über das Kombinieren von Selektoren wissen muss.

Zusätzliche Referenzen

Es gibt noch viele weitere CSS-Selektoren! Erfahren Sie mehr darüber bei CodeTuts, CSS-tricks.com oder im Mozilla Developer Network.