Ghid CSS: combinatorul de frați adiacenți indirecți (selectorul X ~ Y)

În CSS, relațiile dintre elemente nu se limitează doar la părinți și copii (ierarhii descendente). Pentru a crea machete flexibile și interfețe dinamice fără JavaScript, combinatorii de frați (sibling combinators) sunt instrumente extrem de puternice. Unul dintre cei mai versatili este combinatorul de frați adiacenți indirecți sau combinatorul general de frați: X ~ Y.

Cum funcționează combinatorul de frați adiacenți indirecți (X ~ Y)

Selectorul X ~ Y (reprezentat prin caracterul tildă ~) selectează toate elementele Y care împart același părinte direct cu X și care apar după X în codul HTML. Nu este obligatoriu ca elementele să fie consecutive; Y poate fi separat de X prin alte elemente de nivel egal.

/* Selectează toate paragrafele care urmează după o listă neordonată în cadrul aceluiași părinte */
ul ~ p {
    color: #c0392b;
    line-height: 1.7;
}

Comparație directă: X ~ Y versus selectorul adiacent direct X + Y

Acest selector este înrudit cu selectorul de frați adiacenți imediați (X + Y), dar este mult mai permisiv:

• Combinatorul direct X + Y: selectează exclusiv primul element Y plasat imediat după X. Dacă între X și Y intervine un alt tag, regula nu se aplică.
• Combinatorul general X ~ Y: selectează toate elementele Y care apar ulterior în fluxul aceluiași părinte, indiferent dacă sunt sau nu imediat vecine.

Exemplu demonstrativ în HTML

<h2>Titlu de secțiune</h2>
<p>Primul paragraf (afectat atât de h2 + p, cât și de h2 ~ p).</p>
<div>Un bloc intermediar.</div>
<p>Al doilea paragraf (afectat DOAR de h2 ~ p).</p>

Cazuri practice de utilizare în designul modern

1. Stilizarea stărilor interactive fără JavaScript (Checkbox Hack)

Una dintre cele mai populare tehnici CSS folosește selectorul tildă pentru a deschide meniuri, panouri de acordeon sau tab-uri la bifarea unei căsuțe:

/* Când checkbox-ul ascuns este bifat, afișează conținutul panoului asociat */
input[type="checkbox"]:checked ~ .continut-panou {
    display: block;
    opacity: 1;
}

2. Ajustarea spațierii după mesaje de notificare sau erori

/* Adaugă o margine superioară tuturor secțiunilor de text plasate după un mesaj de alertă */
.mesaj-alerta ~ p {
    margin-top: 1.25rem;
}

Condiții esențiale de funcționare

Pentru a stăpâni combinatorul X ~ Y, reține trei reguli cheie:

• Același părinte: Elementele X și Y trebuie să fie frați în arborele DOM (să aibă același nod părinte direct).
• Ordinea în DOM: Elementul Y trebuie să fie poziționat după X în codul sursă HTML, nu înaintea acestuia (CSS nu permite selectarea fraților anteriori).
• Specificitate: Specificitatea selectorului X ~ Y este calculată prin însumarea specificității celor două componente X și Y.