Selectori CSS - de la simpli la complecși

Selectorii sunt „adresele" prin care CSS-ul identifică elementele HTML pe care le stilizează. Stăpânirea selectorilor vă permite să vizați orice element fără a adăuga clase suplimentare în HTML.

/* Selector de element (tag) */
p { color: white; }

/* Selector de clasă - cel mai folosit */
.card { border-radius: 8px; }

/* Selector de ID - specificitate mare, evitați pentru stilizare */
#header { background: #1b2028; }

/* Selector universal - toate elementele */
* { box-sizing: border-box; }

/* Selector de atribut */
input[type="email"] { border: 1px solid #ccac65; }
a[href^="https"] { color: #01ce4c; }      /* începe cu */
a[href$=".pdf"] { color: #e74c3c; }       /* se termină cu */
a[href*="goai"] { font-weight: bold; }     /* conține */

Combinatorii definesc relația între selectori:

/* Descendent (spațiu) - ORICE descendent */
.card p { margin-bottom: 12px; }

/* Copil direct (>) - doar copii direcți */
.nav > li { display: inline-block; }

/* Frate adiacent (+) - elementul imediat următor */
h2 + p { font-size: 1.1rem; }

/* Frați generali (~) - toți frații următori */
h2 ~ p { color: #8a8f98; }

<div class="container">
<p>Paragraf direct (copil)</p>
<div>
<p>Paragraf nested (descendent, nu copil)</p>
</div>
</div>

/* Selectează AMBELE paragrafe */
.container p { color: gold; }

/* Selectează DOAR primul paragraf */
.container > p { color: green; }

/* Fără grupare - cod repetitiv */
h1 { color: #ccac65; font-weight: 700; }
h2 { color: #ccac65; font-weight: 700; }
h3 { color: #ccac65; font-weight: 700; }

/* Cu grupare - cod curat */
h1, h2, h3 {
color: #ccac65;
font-weight: 700;
}

/* Selectorul :is() - grupare modernă */
:is(h1, h2, h3) {
color: #ccac65;
font-weight: 700;
}

Selectorul :has() - revoluționar

:has() este primul „selector de părinte" din CSS - selectează un element bazat pe copiii sau conținutul său:

/* Cardul care CONȚINE o imagine - elimină padding-ul de sus */
.card:has(img) {
padding-top: 0;
}

/* Formularul care CONȚINE un input invalid - border roșu */
form:has(:invalid) {
border: 2px solid #e74c3c;
}

/* Secțiunea care CONȚINE un h2 - margine mai mare */
section:has(> h2) {
margin-top: 64px;
}

/* Body care conține un modal deschis - previne scroll */
body:has(.modal.open) {
overflow: hidden;
}

CSS Nesting (2023+) permite scrierea selectorilor nested direct în CSS, fără preprocessor:

/* CSS Nesting nativ */
.card {
background: #242b35;
border-radius: 8px;
padding: 24px;

& h2 {
color: #ccac65;
margin-bottom: 12px;
}

& p {
color: #f0f0f0;
line-height: 1.7;
}

&:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

&.featured {
border: 2px solid #ccac65;
}
}