dexblog.ro
CSS Toate proprietățile CSS

Combinatori CSS (descendent, copil >, frate +, ~) în CSS

Selectori și reguli de bază CSS2+

Exprimă relația structurală dintre două elemente: descendență, copil direct sau elemente surori în DOM.

Sintaxă CSS 
nav a { ... }     /* descendent (la orice adâncime) */
ul > li { ... }   /* copil direct */
h2 + p { ... }    /* frate imediat următor */
h2 ~ p { ... }    /* toți frații ulteriori */

Ce face Combinatori CSS (descendent, copil >, frate +, ~)

Combinatorii CSS leagă doi selectori simpli pe baza poziției lor în arborele HTML.

• Spațiul (descendent): vizează elementul dacă se află oriunde în interiorul primului, indiferent de nivelul de adâncime.
• Semnul > (copil direct): vizează doar elementele aflate direct pe primul nivel de adâncime în interiorul părintelui.
• Semnul + (frate adiacent): vizează elementul plasat imediat după primul, la același nivel.
• Semnul ~ (frate general): vizează toate elementele plasate după primul la același nivel.

Valori uzuale

Valoare Descriere
A B Selectează orice B aflat în interiorul lui A (descendent).
A > B Selectează doar B dacă este copil direct al lui A.
A + B Selectează primul B plasat imediat după A la același nivel.
A ~ B Selectează orice B care urmează după A la același nivel.

Exemple

Exemplul 1: Stilizarea primului paragraf de după un titlu

Combinatorul + permite evidențierea paragrafului introductiv fără a adăuga o clasă manuală în HTML.

/* Doar paragraful care vine imediat după un h2 */
h2 + p {
  font-size: 1.2rem;
  color: #475569;
}

/* Doar linkurile din interiorul meniului */
nav > a {
  margin-right: 15px;
  text-decoration: none;
}

Efect vizual în browser

Primul paragraf de după titlu apare cu font mai mare (stil lead), iar linkurile din meniu sunt distanțate și fără subliniere.

Greșeli frecvente

  • Confundarea combinatorului descendent (spațiu) cu selectorul multiplu cu virgulă: h1, p aplică stilul la ambele, în timp ce h1 p caută un paragraf aflat în interiorul unui h1.

Comenzi înrudite