Diese CSS-Selektoren sollten Sie kennen

Ein herkömmlicher Nachfahrenselektor wie nav ul hätte die Einrückung auch für die verschachtelten Listen entfernt, die man dann mühsam wiederherstellen müsste.

2. Attributselektoren haben [eckige] Klammern

Der einfachste Attributselektor überprüft nur das Vorhandensein eines Attributs: a[title] selektiert alle Links mit dem Attribut title.

Mit einem Gleichheitszeichen kann man einen Attributselektor auf einen bestimmten Wert einschränken, was besonders in Formularen sehr nützlich ist. Hier zwei Beispiele:

input[type=”email”]input[type=”submit”]

Das Gleichheitszeichen kann durch eine Tilde, ein Hütchen, ein Dollarzeichen oder Sternchen erweitert werden, die folgende Bedeutungen haben:

• [attr^="zeichen"] = “zeichen” am Anfang des Wertes
• [attr$="zeichen"] = “zeichen” am Ende des Wertes
• [attr*="zeichen"] = “zeichen” irgendwo im Wert

Dadurch gibt es besonders für Links einige interessante Möglichkeiten:

• a[href^="http"] selektiert alle Links mit http am Anfang
• a[href$=".pdf"] gestaltet alle Links auf PDF-Dateien
• a[href*="wikipedia.org"] wählt alle Links zur Wikipedia

Fehlt nur noch die Tilde ~. Der Selektor [attr~="zeichen"] wählt alle Elemente, die in einem bestimmten Attribut unter anderem diesen Wert haben, und zwar mit einer Leerstelle davor und dahinter. Das ist besonders praktisch, wenn ein Attribut mehrere Werte hat, wie es zum Beispiel bei Klassen oft der Fall ist:

[class~="grid4"] selektiert alle Elemente mit der Klasse grid4, auch wenn Sie noch weitere Klassen enthalten, wie z. B. <div class="info grid4 box">.

3. Die Pseudoklassen :first-child und :last-child

Pseudoklassen heißen so, weil damit zwar wie mit einer Klasse eine Gruppe von Elementen ausgewählt wird, dabei aber im HTML das Attribut class nicht auftaucht.

Besonders nützliche Vertreter dieser Gattung sind :first-child und :last-child, mit denen das erste bzw. das letzte einer Reihe von Geschwistern ausgewählt werden.

So wird in Navigationslisten der erste und der letzte Menüpunkt oft etwas anders gestaltet. Im folgenden Beispiel bekommt zunächst jedes Listenelement rechts eine senkrechte Rahmenlinie:

nav li { border-right: 1px solid #ccc; }

Um dem ersten Listenelement auch links eine senkrechte Linie zu geben, bietet sich :first-child an:

nav li:first-child { border-left: 1px solid #ccc; }

Die folgende Abbildung zeigt dieses Beispiel im Browser:

Der Selektor :first-child fügt die erste Rahmenlinie hinzu.

:nth-child() ist der Zauberstab für Kinder

Mit Pseudoklassen können Sie wie eben gesehen ganz einfach das erste und das letzte Kind eines Elements ansprechen, aber das ist noch lange nicht alles, denn mit :nth-child() können Sie richtiggehend zaubern, was die Auswahl von Kindern angeht.

Der englische Ausdruck the nth child heißt frei übersetzt soviel wie “das xte Kind” oder auch “das soundsovielste Kind”. Das “n” ist ein Platzhalter für Ordnungszahlen wie first, second, third und so weiter.

Die Zaubertricks zum Auswählen von Kindelementen werden durch das Klammernpaar nach der Pseudoklasse möglich. Zunächst einmal kann man dort einfache ganze Zahlen notieren: :nth-child(2) wählt zum Beispiel das zweite Kind aus.

Mit :nth-child() können Sie zum Beispiel vier aufeinanderfolgende Listenelemente auswählen und ihnen eine unterschiedliche Hintergrundfarbe oder Hintergrundbilder zuweisen:

nav li:nth-child(1) { background-color: #058; }nav li:nth-child(2) { background-color: #069; }nav li:nth-child(3) { background-color: #07b; }nav li:nth-child(4) { background-color: #08c; }

;Die Pseudoklasse :nth-child() in Aktion
Die Klammern von :nthchild() können aber nicht nur Zahlen aufnehmen, sondern auch einfache Ausdrücke nach dem Muster :nth-child(an+b), wobei “a” und “b” für beliebige ganze Zahlen stehen. Die Möglichkeiten von :nth-child() tendieren gegen unendlich und zum Üben gibt es auf css-tricks.com ein sehr schönes Tool. Link siehe unten.

:nth-child() ist besonders bei Listen und Tabellen sehr nützlich, denn dort gibt es für ein Elternelement in der Regel viele gleichartige Kindelemente.

Die Pseudoklasse :target

Mit der Pseudoklasse :target kann man das Sprungziel eines Hyperlinks hervorheben. Ein sehr schönes Beispiel dafür findet sich in der Wikipedia. Wenn man dort auf ein hochgestelltes Fußnotenzeichen klickt, springt man zu der Fußnote auf derselben Seite weiter unten. Diese Fußnote wird mit der Pseudoklasse :target farblich hervorgehoben.

Die angeklickte Fußnote wird per :target hervorgehoben.
Der Link <a href="#cite_note-2">[2]</a> springt zu der Fußnote <li id="cite_note-2"> unten auf der Seite. Dadurch wird der Zusatz #cite_note-2 an das Ende der URL gehängt und das Element mit dieser ID durch das folgende CSS hervorgehoben:

ol.references > li:target { background: #def; }

Das Pfiffige an :target ist, dass das li-Element nur hervorgehoben wird, wenn vorher auf den Link geklickt wurde, der die ID des Listenelementes aufruft.

Mit dem geschickten Einsatz von :target kann man zum Beispiel CSS-only-Lösungen für mobile Navigationen oder Akkordeons erstellen. Hier geht es zum :nth Tester von CSS Tricks.

CSS-Attribut- und Wertselektoren

Wussten Sie, dass Sie Elemente nicht nur nach dem Namen des Attributs auswählen können, sondern auch nach dem Wert dieses Attributs? Ich selber wusste das lange Zeit nicht und habe lange Zeit nur CSS-Klassen und IDs verwendet.

So geht die Auswahl per CSS-Attribut

Angenommen, Sie möchten alle HTML-Tags auswählen, in denen das Attribut “Name” enthalten ist:

<input name="email" value="" />

Das ist das CSS, das Sie brauchen:

input[name] {/* styles */}

Sie denken wahrscheinlich, dass dies ziemlich nutzlos ist, da fast alle Eingaben ein “Name” -Attribut haben und mit Ihnen übereinstimmen.

Auswahl nach Attribut und Wert

Wenn Sie mehrere Websites erstellt haben, haben Sie wahrscheinlich Ihre eigenen Namenskonventionen für Tags entwickelt. In meinem Fall verwende ich bei jedem Kontaktformular name = ”email” für das E-Mail-Feld. Um dieses spezielle Feld zu formatieren, könnte ich ihm ein Klassenattribut mit dem Wert “email” zuweisen. Warum nutze ich jedoch nicht eine bereits eingegebene Funktion, um alle Eingabetags mit dem Attribut “name” mit CSS zu formatieren?

So würde das aussehen.

input[name=email] {/* styles */}

Diese Selektoren sind schon sehr praktisch, aber es geht noch besser.

Regex-Selektoren in CSS

Reguläre in CSS zu schreiben ist einfacher als Sie denken. Auch wenn Sie bisher noch keine regulären Ausdrücke verwendet haben, können Sie diese Art der Auswahl trotzdem problemlos beherrschen und lernen nebenher noch etwas Regex.

PDF-Dateien enden normalerweise mit “.pdf”, sofern sie nicht dynamisch generiert wurden. Mit dem folgendem CSS-Trick, können Sie jedem PDF-Link auf Ihrer Website ein PDF-Symbol hinzufügen.

Das Attribut, nach dem ich in diesem Fall suche, ist href und sein Wert endet mit “.pdf”.

a[href$='.pdf']{ /* apply icon */}

In regulären Ausdrücken markiert “$” das Ende eines Strings. In CSS haben wir es also verwendet, um zu sagen, dass wir nur alle Links formatieren möchten, die mit “.pdf” enden.

Ein weiteres Zeichen für reguläre Ausdrücke, das sehr häufig verwendet wird, ist das Zeichen “^”. Es kennzeichnet den Anfang einer Zeichenfolge. Verwenden wir dieses Zeichen, um Links mit dem Protokoll “https” zu formatieren.

a[href^='https']{/*style*/}

Was wäre, wenn Sie alle PHP-Links formatieren möchten? Sie überlegen wahrscheinlich, das “$” zu verwenden, das ich Ihnen gezeigt habe, da dies das Ende eines Strings markiert und Sie es für Erweiterungen verwenden können. Denken Sie jedoch daran, dass PHP-Links möglicherweise Parameter enthalten, sodass sie möglicherweise nicht mit der Erweiterung enden. Wir müssen das Sternchen “*” verwenden, das Sternchen wird verwendet, um irgendwo in der Zeichenfolge nach einer bestimmten Zeichenfolge zu suchen und nicht nur am Anfang oder Ende.

a[href*='.php']{/* styles here */}

Sie können Regex auf andere Arten von Tags anwenden, nicht nur auf Ankertags.

Bonuspunkte gibt’s für: Datei-Upload-Buttons stylen mit dem Pseudo-Element ::file-selector-button

Mit dem folgenden Code kannst Du nun auch (ab Chrome 89) die Select- bzw. Datei hochladen Buttons stylen:

 input[type=file]::file-selector-button {  background: #4e9d46;  color: #fff;  padding: 0.5em;}input[type=file]::file-selector-button:hover {  background: #ee1d7a;}