Ghid CSS: combinatorul de frați adiacenți imediați (selectorul X + Y)

În dezvoltarea paginilor web moderne cu CSS, stilizarea elementelor nu se bazează doar pe relațiile ierarhice de tip părinte-copil, ci și pe legăturile dintre elemente aflate pe aceeași treaptă ierarhică. Unul dintre cele mai utile instrumente este combinatorul de frați adiacenți imediați (adjacent sibling combinator), marcat prin simbolul + (X + Y).

Cum funcționează selectorul X + Y

Selectorul X + Y selectează elementul Y doar dacă acesta îndeplinește simultan două condiții:

• Împarte același element părinte cu X (ambele sunt pe același nivel în structura DOM).
• Urmează imediat după elementul X în codul sursă HTML.

Exemplu practic de utilizare

Să presupunem că avem următoarea secțiune dintr-un articol:

<ul>
    <li>Element de listă 1</li>
    <li>Element de listă 2</li>
</ul>

<p>Paragraful 1: plasat imediat după lista ul.</p>
<p>Paragraful 2: continuarea textului din articol.</p>

Dacă aplicăm următoarea regulă CSS:

ul + p {
    color: #c0392b;
    font-weight: bold;
}

Rezultat: Doar primul paragraf (plasat nemijlocit după lista neordonată) va fi colorat cu roșu și evidențiat cu caractere aldine. Al doilea paragraf nu este afectat, deoarece fratele său imediat anterior este un alt paragraf (<p>), nu lista <ul>.

Diferența față de combinatorul general de frați (X ~ Y)

Este util să distingem între combinatorul adiacent direct și cel general:

• X + Y (adiacent direct): vizează exclusiv primul element Y plasat direct după X.
• X ~ Y (frate general): vizează toate elementele Y care urmează după X în cadrul aceluiași părinte, chiar dacă între ele se interpun și alte taguri diferite.

Scenarii frecvente de aplicare practică

• Paragraf introductiv (lead text): stilizarea diferențiată a primului paragraf plasat după un titlu principal (h2 + p { font-size: 1.2em; color: #444; }).
• Formulare web și controale personalizate: stilizarea etichetelor asociate căsuțelor de bifare sau butoanelor radio (input[type="checkbox"] + label { cursor: pointer; }).
• Spațiere verticală automată între paragrafe consecutive: aplicarea marginii superioare doar pe paragrafele care urmează după un alt paragraf (p + p { margin-top: 1.5em; }), păstrând primul paragraf aliniat la începutul secțiunii.