relativeMeister.com
Der CSS Selektor, Teil 2: Erweiterte CSS Selektoren
Es gibt nicht nur den einfachen CSS Selektor. Lerne in diesem Tutorial, wie wir auch erweiterte CSS Selektoren einsetzen können.Tags: CSS lernen | CSS-Befehle | CSS-Selektoren | HTML-Tag | Programmieren lernen | Web-Development lernen | Webseiten erstellen lernen | Website-LayoutWorum geht´s?
In unserem ersten CSS Tutorial zu CSS Selektoren haben wir uns den einfachen CSS Selektor angesehen: über HTML-Tags, Klassen und IDs. Außerdem haben wir uns mit den grundsätzlichen CSS Dominanzregeln vertraut gemacht.
In diesem CSS Tutorial geht es um erweiterte CSS Selektoren.
1. Ein CSS Selektor über mehrere HTML-Tags, Klassen und/oder IDs
Wie sage ich dem Browser, dass ein CSS Selektor nur dann ein HTML-Element auswählen soll, wenn es mehrere bestimmte HTML-Tags, Klassen und/oder IDs beinhaltet?
Dies erreichen wir, wenn wir im CSS-Selektor all diese Voraussetzungen ohne Leerzeichen direkt nebeneinander schreiben. Als in etwa so:
.schule.volksschule {
color: red;
}Wenn ein HTML-Element nur die Klasse „schule“ oder nur die Klasse „volksschule“ besitzt, so wird es von diesem CSS-Selektor nicht ausgewählt.
Nur wenn das HTML-Element alle beide Klassen besitzt, wird es vom CSS-Selektor ausgewählt.
Das gleiche Prinzip lässt sich auch mit Klassen und IDs ausnutzen:
#schule1.schule.volksschule {
color: red;
}Nur ein HTML-Element, das die ID „schule1“ UND beide angegebenen Klassen in sich vereint, wird von diesem CSS-Selektor ausgewählt.
Und auch mit HTML-Tags und Klassen funktioniert das Ganze:
div.schule {
color: red;
}Der obige CSS Selektor wählt nur die DIVs aus, die auch die Klasse „schule“ besitzen.
2. Ein CSS Selektor über Attribute von HTML-Elementen
Der CSS Selektor kann auch über Attribute von HTML-Elementen weiter spezifiziert werden.
Eines der am meisten verbreitetsten Beispiele ist vermutlich das Attribut type im <input>-Element:
input[type="text"] {
color: red;
}Das gleiche Prinzip funktioniert aber auch für so ziemlich alle anderen Attribute von HTML-Elementen.
Mit diesem CSS Selektor könnte man z.B. alle Links mit leerem href-Attribut grau einfärben:
a[href=""] {
color: gray;
}3. Erweiterte Beziehungen zwischen HTML-Elementen im CSS Selektor
Was wir bereits kennen, ist die Eltern-Kind Beziehung zwischen HTML-Elementen in unserem CSS Selektor, die wir mit Hilfe eines Leerzeichens beschreiben:
ul li {
color: red;
}Mit Hilfe des Leerzeichens werden alle Kind-Elemente vom Typ li des ul-Elements verändert.
Was aber, wenn wir nur die direkten Kinder verändern wollen – also gewissermaßen die Kinder, nicht aber die Enkel-Kinder?
Dann brauchen wir das Größer-Zeichen >.
3.1 Nur direkte Kind-Elemente auswählen mit >
Der folgende CSS-Selektor wählt nur dann HTML-Elemente aus, wenn sie in direkter Eltern-Kind-Beziehung stehen:
#div1 > ul > li {
color: blue;
}Wird stattdessen das ul-Element ausgelassen, funktioniert es nicht, weil <li>-Elemente ja immer innerhalb von <ul>-Elementen sind:
#div1 > li {
color: blue;
}Das #div1-Element und das <li>-Element sind zwar verbunden, aber haben eine Großeltern-Enkel-Beziehung. Mit einem Leerzeichen als Beziehungs-Operator zwischen den HTML-Elementen würde das zulässig sein. Der > Operator in CSS ist da genauer.
3.2 Alle Geschwister-Elemente auswählen mit ~
Der Tilde-Operator in CSS (~) wählt alle Geschwister des ausgewählten HTML-Elements aus.
„Geschwister“ sind dabei HTML-Elemente, die die selben direkten Eltern-Elemente besitzen.
Nehmen wir an, dass wir in unserem <body>-Tag 3 DIVs vorfinden:
<div id="div1"></div> <div id="div2"></div> <div id="div3">TEXT</div>
Wollen wir nun alle Geschwister des HTML-Elements mit der ID „div1“ auswählen, so geht das so:
#div1 ~ div {
border: 5px solid green;
}Allerdings gibt es hierbei eine wichtige Einschränkung:
Es können nur Geschwister ausgewählt werden, die im HTML-Code hinter dem Start-Element (in unserem Fall #div1) stehen.
Wählt man statt #div1 nämlich #div2, wird zwar #div3 ausgewählt, nicht aber #div1.
3.3 Nur das nächste Geschwister-Element auswählen mit +
Will man nicht alle, sondern nur das jeweils nächste Geschwister-Element auswählen, so kann man statt dem Tilde-Operator (~) auch den Plus-Operator (+) verwenden.
Ansonsten ist das Prinzip (und auch die Einschränkung) gleich wie bei dem Tilde-Operator (~):
#div1 + div {
border: 5px solid green;
}Nun fehlt uns nur noch ein spezieller CSS-Selektor: Wildcard, oder auch *.
4. Alle HTML-Elemente auswählen mit dem Wildcard-Selektor *
Es ist in CSS auch möglich, einfach alle HTML-Elemente mit auszuwählen.
Der Schlüssel dazu nennt sich Wildcard-Selektor und besteht aus einem *-Symbol:
* {
font-size: 20px;
}Wozu braucht man den nun eigentlich?
Nun, im Grunde gibt es mindestens zwei sehr nützliche Anwendungsfälle:
- Alle HTML-Elemente innerhalb eines anderen auswählen und
- Alle HTML-Elemente außer einigen bestimmten auswählen
Wenn wir z.B. jedes HTML-Element innerhalb von #div1 auswählen wollen, können wir das so schreiben:
#div1 * {
color: red;
}Vor allem aber interessant ist die Kombination mit :not – z.B. so:
.oneColumn > :not(.code-block) {
max-width: 700px;
margin-left: auto;
margin-right: auto;
}So kann z.B. der Haupt-Textteil auf eine bestimmte Breite beschränkt werden, außer es handelt sich um Inhalte, die von einer größeren Breite durchaus profitieren würden, falls der Bildschirm das hergibt.
In diesem speziellen Fall z.B. Code-Abschnitte, die man auf einem größeren Bildschirm dann leichter einsehen und kopieren kann.
5. Mehrere CSS Selektoren kombinieren mit einem Beistrich
Auch wenn es in anderen CSS Tutorials hier schon öfter vorgekommen ist: mit einem Beistrich kann man mehrere CSS Selektoren kombinieren und ihnen die gleichen CSS-Befehle zuweisen:
#div1,
#div2,
h1,
.schule {
font-size: 20px;
}Kann auch sehr nützlich sein.
So, das wars auch schon wieder mit den erweiterten CSS Selektoren.
Viel Freude noch damit! 🙂