Селектор сестринських елементів
Ще один цікавий спосіб використання каскадного – сусідні селектори CSS. Записуються вони як сума селекторів: «span + a {color blue}». При цьому сусідом вважається той, під яким є ще один, відповідний під потрібні параметри. Таким чином, якщо в коді є три елементи, то до першого з них властивість не застосується, тому що у нього немає сусіднього, а до всіх наступних – так. Так відбувається через значка суми, коли складаються наступні селектори, а не попередні. Така запис допомагає скоротити код і не записувати кілька CSS селекторів для різних тегів, застосовуючи до них однакові властивості. Якщо другого елементу списку задати додатково ще й клас, а запис змінити на «.class + a{color blue}», тоді відлік піде від нього і властивості зміняться у наступних підходять під правило елементів, а два перших залишаться колишніми.
Тепер припустимо, що в нашому коді є три однакових тега з різними класами і потрібно вибрати всі елементи після якогось певного. У цьому випадку не допоможе застосування лише селекторів тегів CSS. Для цього використовується селектор наступного виду: «.class ~ div». При цьому вибираються елементи з тегом div, які йдуть після заданого класу. Якщо ми хочемо вибрати не тільки елементи з тегом div, але і всі наступні, замість тега після знака тільди потрібно поставити символ зірочки – «*». Такий запис буде означати, що потрібно вибрати все, що слідує після заданого класу. Можна вибрати взагалі всі елементи на сторінці, якщо залишити в якості селектора тільки зірочку.
