CSS selektorja :has() in :not() nam pomagata bolje ciljati določene elemente s pomočjo CSS z določenimi pogoji. Slednje naredi našo kodo krajšo in na dolgi rok zmanjša velikost strani in pohitri nalaganje, korak za korakom.
Zakaj bi sploh uporabljali CSS selektorje :has() in :not()?
Sam največ vrednosti vidim v ciljanju nekaterih pogojev, npr. če imamo naslov h1 in nato takoj sledi h2 so običajno presledki preveliki. V teh primerih si lahko pomagamo s pomočjo :has() selektorja in tako povemo, da je razmik med njima manjši.
Primer pri razmikih:
h1:has(+ h2) {
margin: 0 0 0.25rem 0;
}
Še boljši primer je, ko ciljamo starša določenega elementa. To lahko storimo s pomočjo:
See the Pen
CSS selektor :has() by Ziga (@pomagalnik)
on CodePen.
Selektor :not() nam pride zelo prav pri seznamih, npr. želimo med elementi besedila/navigacije dodati mejo, vendar ne pri zadnjem elementu. V tem primeru bi bila koda podobna spodnji.
See the Pen
CSS selector :not() by Ziga (@pomagalnik)
on CodePen.
Oba CSS selektorja sta zelo dobro podprta(:has, :not), razen v brskalnikih IE. Glede na tržni delež slednjega in razvoj, lahko oba selektorja brez skrbi vključite v svoj razvoj spletnih projektov. Njegovo uporabo oz. načine uporabe pa omejuje samo vaša domišljija.
