In der Praxis kann man die Geschwister-Selektoren im Zusammenhang mit Pseudoklassen einsetzen. Um Geschwister- Elemente zu verändern, indem man ein anderes Element berührt oder anklickt.
In diesem Fall wird das Geschwisterlement nur dann verändert, wenn das davorstehende Geschwisterlement berührt wird.
div:hover ~ .blue{background-color: pink;}
Es lässt sich auch gut dazu einsetzen Element ein und auszublenden. display: none, display: block;
Im Bild unten, wird figcaption eingeblendet, wenn das Bild berührt wird. img:hover ~ figcaption{display: block;}
ansonsten wird figcaption ausgeblendet figcaption{display: none;}