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.

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>.

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" />    

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt