Der allgemeine Geschwisterkombinator (~) in CSS sieht im Gebrauch folgendermaßen aus:
.featured-image ~ p ( font-size: 90%; )In diesem Beispiel würden Sie alle Absätze in einem Artikel auswählen, die nach dem vorgestellten Bild (einem Element mit dem Klassennamen "vorgestellten Bild") stehen, und sie etwas kleiner machen font-size.
Dadurch werden Elemente auf derselben Hierarchieebene ausgewählt. In diesem Beispiel befinden sich .featured-imagedie pElemente in derselben Hierarchie. Wenn der Selektor nach poder vor fortgesetzt wird .featured-image, gelten die normalen Regeln. .featured-image ~ p spanWürde also immer noch Bereiche auswählen, die Nachkommen von .featured-image ~ pÜbereinstimmungen sind.
Die Spezifikation für Selektoren der Stufe 4 nennt diese "folgenden Geschwisterkombinatoren".
Demo
Hier ist ein weiteres Beispiel, das alle pElemente hervorhebt, die auf Folgendes folgen img:
img ~ p ( background-color: #FEF0B6; padding: 5px; )Was zu folgendem Ergebnis führt:
Macken
WebKit hatte früher eine Eigenart, die man mit Pseudo-Selektoren nicht verwenden konnte. Mögen:
input:checked ~ div ( /* Wouldn't work */ )Ich kenne nicht die genauen Versionen von Browsern, in denen dies behoben wurde, aber es ist jetzt behoben.
Mehr Informationen
- Kinder- und Geschwisterselektoren
- Ähnlich wie beim benachbarten Geschwisterkombinator.
- MDN Docs
Browser-Unterstützung
| Chrom | Safari | Feuerfuchs | Oper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Irgendein | 3+ | 1+ | 9+ | 7+ | Irgendein | Irgendein |