:not() (negarea selectorilor) în CSS

li:not(:last-child) { border-bottom: 1px solid #e2e8f0; }
a:not([href^="https"]) { color: #b91c1c; }
button:not(.primar, .secundar) { background: #f1f5f9; }

Ce face :not() (negarea selectorilor)

:not() exclude din selecție elementele care se potrivesc cu argumentul. Cel mai des este folosit pentru a evita o regulă de anulare: în loc să pui o bordură pe toate elementele și apoi s-o scoți de pe ultimul, scrii direct li:not(:last-child).

În browserele actuale, :not() acceptă o listă de selectori: :not(.a, .b) exclude elementele care au clasa .a sau clasa .b. Poți folosi și selectori compuși, cum ar fi :not(.card .titlu).

Specificitatea lui :not() este cea a celui mai specific selector din paranteză (pseudo-clasa în sine nu adaugă nimic). Spre deosebire de :is(), lista din :not() nu este tolerantă: un selector invalid face ca toată regula să fie ignorată.

Valori uzuale

Valoare	Descriere
X:not(A)	Elementele X care nu se potrivesc cu A.
X:not(A, B)	Elementele X care nu se potrivesc nici cu A, nici cu B.
:not(:last-child)	Toate elementele, în afară de ultimul copil al părintelui.
:not([atribut])	Elementele care nu au atributul respectiv (ex. img:not([alt])).

Exemple

Exemplul 1: Separator între elementele unui meniu, fără linie după ultimul

Regula se aplică direct elementelor corecte, fără o a doua regulă care să anuleze bordura.

.meniu-restaurant li {
  padding: 12px 0;
}

.meniu-restaurant li:not(:last-child) {
  border-bottom: 1px dashed #cbd5e1;
}

Efect vizual în browser

Meniul afișează „Ciorbă rădăuțeană – 22 lei”, „Sarmale cu mămăligă – 35 lei”, „Papanași – 18 lei”, cu o linie punctată sub primele două produse și nicio linie sub papanași.

Exemplul 2: Semnalarea linkurilor nesigure și a imaginilor fără text alternativ

Un stil de verificare util în timpul dezvoltării: scoate în evidență problemele din pagină.

/* Linkuri externe care nu folosesc https */
a[href^="http"]:not([href^="https"]) {
  outline: 2px solid #dc2626;
}

/* Imagini fără atributul alt */
img:not([alt]) {
  outline: 4px dashed #f59e0b;
}

Efect vizual în browser

Linkul spre http://exemplu-vechi.ro este încadrat cu roșu, iar linkul spre https://www.dexblog.ro rămâne normal. Fotografia cu Palatul Culturii din Iași, care nu are atribut alt, apare înconjurată de o linie portocalie întreruptă.

Greșeli frecvente

• Scrierea :not(.a):not(.b) când poți scrie mai clar :not(.a, .b); ambele forme sunt echivalente în browserele actuale.
• Confuzia dintre div:not(.card) p și div p:not(.card): primul exclude div-urile cu clasa .card, al doilea exclude paragrafele cu clasa .card.
• Folosirea :not(*) sau a unor negații foarte generale; ele fie nu selectează nimic, fie selectează aproape tot documentul.

Comenzi înrudite

• :is() și :where(): Grupează mai mulți selectori într-unul singur; :is() păstrează specificitatea celui mai puternic argument, :where() are specificitate zero.
• Pseudo-clase (:hover, :focus, :active, :nth-child): Stilizează un element în funcție de starea sa (interacțiune cu mouse-ul, tastatura) sau poziția structurală în listă.
• Selectori de atribut ([attr], ^=, $=, *=): Selectează elementele după prezența sau valoarea unui atribut HTML: tipul unui câmp, adresa unui link, atribute data-*.
• :nth-of-type(), :nth-last-child() și :nth-child(An+B of S): Variantele lui :nth-child(): numără doar elementele de același tip, numără de la final sau numără doar elementele care au o anumită clasă.