Schwarzcode

Nachschlagewerk zur Ergänzung des Unterrichts in Frontend Development – und für mich. Sehr subjektiv gefärbt und ohne Anspruch auf Vollständigkeit.


Selektoren für Pros

Verschachtelte Selektoren

Anstelle von Klassen ist es oft übersichtlicher, Selektoren zu verschachteln. Im Beispiel hier gelten die Eigenschaften nur für die Anker innerhalb des HTML-Elementes mit der ID «Navigation» – egal wie tief diese verschachtelt sind:

#Navigation a       { color:red; }
#Navigation a:hover { color:black; }

Oder für die Fettauszeichnung nur innerhalb eines Ankers. Achtet darauf, dass Zustandsänderungen auf :hover auch verschachtelt werden müssen.

a strong       { color:red; }
a:hover strong { color:black; }

Oder nur für jene innerhalb eines Ankers innerhalb des HTML-Elements mit der ID «Navigation»:

#Navigation a strong       { color:red; }
#Navigation a:hover strong { color:black; }

Es lassen sich alle Arten von Selektoren, inkl. den attributabhängigen beliebig ineinander verschachteln.

Spezifisch verschachtelte Selektoren

Element direkt danach

Mit einem + wird das Element angsprochen, welches unmittelbar nach dem zuerst genannten kommt. Es dürfen keine andere Elemente dazwischen liegen. Hier im Beispiel der p nach dem h3.

0

Elemente genau 1 Ebene tiefer

Mit einem > werden Elemente angsprochen, welche genau eine Ebene tiefer verschachtelt liegen. Im Beispiel sind standardmässig alle List-Items gray, ausser jene die genau eine Ebene tiefer als die Class «Menu» liegen.

0

Elemente mindestens 2 Ebenen tiefer

Setzt man statt wie oben das Grösserals-Zeichen einen Universalselektoren (*) dazwischen, muss logischerweise mindestens ein beliebiges Element übersprungen werden. Im Beispiel sind alle em innerhalb eines p ziegelrot. Jene die aber mindestens noch in ein weiteres Element (hier strong) gepackt werden, sind blaugrün. Ist etwas gesucht, zugegeben. Das kommt daher, dass ich bis jetzt hierfür noch nie Verwendung hatte.

0

Attribut-Selektoren

Haben HTML-Elemente Attribute, so lassen sie sich auch über ihre Attribute und sogar deren Werte ansprechen. Hier ein paar Beispiele:

Nur das Attribut

Dieser Selektor spricht alle Bild-Elemente mit einem Title-Attribut an:

img[title] { … }
<img title="2011" alt="Sonnenuntergang" />

Attribut plus Attributwert

Hier wird als Beispiel ein Input-Element mit dem Type-Attribut «submit» angesprochen:

input[type="submit"] { … }
<input type="submit" name="senden" />

Auswahl an Begriffen

Besteht ein Attributwert aus mehreren Begriffen mit Wortabstand, kann der Selektor so gesetzt werden, dass er auf einen bestimmten Begriff innerhalb des Attributs reagiert. Im folgenden Beispiel funktioniert das mit den Begriffen «Roter» und mit «St.Gallen». «Platz,» würde nur in Kombination mit dem Komma funktionieren, weil da eben der Wortabstand fehlt.
Beachtet die Tilde (~) im Selektor.

img[alt~="St.Gallen"] { … }
<img alt="Roter Platz, St.Gallen" src="sonne.png" />

Zeichenfolge plus Divis

Diese Variante selektiert ein Element mit einem bestimmten Begriff in Kombination mit einem «-». Kann praktisch sein im Zusammenhang mit generierten Klassen aus CMS.

a[title|="Home"] { … }
a[title|="Shop"] { … }
<a href="../index.html" title="Home-Link">Startseite</a>
<a href="../shop.html" title="Shop-Link">Shop</a>

Verantwortlich:
Jürgen Wössner
E-Mail

Schwarzcode

Nachschlagewerk zur Ergänzung des Unterrichts in Frontend Development – und für mich. Sehr subjektiv gefärbt und ohne Anspruch auf Vollständigkeit.

Aber mit so einem kleinen Bildschirm hier ist das ganze echt nutzlos. Geh mal rüber an einen grösseren Bildschirm.