Advanced CSS - Kontext-Selektoren
1. Definition
Kontext-Selektoren werden deshalb so genannt, weil sie nur in bestimmten Zusammenhängen wirken. Die Zuweisungen sind also nur dann gültig, wenn die entsprechenden HTML-Elemente eine vorgegebene Position relativ zu anderen haben.
Wichtig!
Mit Ausnahme des Nachfolge-Selektors werden alle weiteren vom Internet Explorer 6 nicht interpretiert. Da ich mich langsam aber sicher von diesem Fossil verabschiede, kann ich euch diese wirklich nützlichen Helferlein nicht mehr vorenthalten.
2. Der Nachfolge-Selektor
... auch gerne als Nachfahren-Selektor bezeichnet, habe ich euch schon an dieser Stelle gezeigt. Dabei greift die CSS-Anweisung für alle(!) Elemente, die sich innerhalb eines anderen befinden.
div.blubb p { ... }
... bezieht sich also auf alle Absätze innerhalb des <div>-Elements mit der Klasse blubb. Dabei ist
es völlig egal, wie tief die Verschachtelung ist.
3. Der Kind-Selektor
Im Gegensatz zum Nachfolge-Selektor gilt der Kind-Selektor nur für Elemente, die sich direkt unter dem Hauptelement befinden. Ausgenommen
sind also diejenigen, die sich in tieferen Ebenen befinden. Die Zuweisung erfolgt über das >.
div.blubb > p { ... }
...
<div class="blubb">
<p>Hier greift der Selektor</p>
<div class="blubber">
<h2>Irgendwas</h2>
<p>Hier greift er nicht!</p>
</div>
<p>Hier greift er wieder</p>
</div>
4. Direkter Nachbar-Selektor
In diesem Fall gilt die Anweisung für ein Element, wenn es direkt auf ein anderes folgt. Alle weiteren werden ignoriert. Die Zuweisung
läuft hier über das +.
h1 + p { ... }
...
<h1>Irgendwas</h1>
<p>Hier greift der Selektor</p>
<p>Hier greift er nicht!</p>
5. Indirekter Nachbar-Selektor
Im Gegensatz zum direkten Nachbar-Selektor bezieht sich hier eine Anweisung auf alle Elemente, die innerhalb einer Ebene auf ein
bestimmtes Element folgen. Für die Zuweisung nimmt man die Tilde, also das ~. Wer sich jetzt fragt, wo das verdammte Ding
auf seiner Tastatur ist, der schaue mal auf die Taste mit dem Pluszeichen und kombiniere das mit AltGr.
h1 ~ p { ... }
...
<h1>Irgendwas</h1>
<p>Hier greift der Selektor</p>
<div class="blubb">
<p>Hier nicht!</p>
</div>
<p>Hier greift er wieder</p>
6. Attribut-Selektoren
Auch das ist möglich. Hier greift man nicht auf das jeweilige HTML-Tag zu, sondern auf spezielle Attribute. Funktioniert zum Beispiel
sehr schön bei Formularelementen vom Typ <input>. Und der IE6? Ach, vergesst es einfach.
input[type="text"] {
color: #f00;
}
input[type="reset"] {
border: 1px solid #f00;
}
input[type="submit"] {
border: 1px solid #00f;
}
...
<input type="text" name="bla" />
<input type="reset" name="blubb" />
<input type="submit" name="blubb" />