Što je CSS Selector?

CSS se oslanja na pravila podudaranja uzoraka kako bi odredio koji se stil primjenjuje na koji element u dokumentu. Ti se obrasci zovu selektora i oni se kreću od naziva oznaka (na primjer,

p kako bi se podudarale oznake odlomaka) do vrlo složenih uzoraka koji odgovaraju vrlo specifičnim dijelovima dokumenta (na primjer,

p # myid> b.highlight bilo bi dobro

b oznaka s klasom

vrhunac to je dijete stavka s ID-om

Moj ID).

Odabir CSS-a dio je poziva stila CSS-a koja identificira koji dio web stranice treba biti oblikovan. Selektor sadrži jedno ili više svojstava koja definiraju kako će odabrani HTML biti stilizirani.

CSS Odabiri

Postoji nekoliko različitih vrsta selektora:

odabir tipa - podudaranje s određenim elementom
klasni selektori - elementi podudaranja s određenom klasom
ID odabiri - podudaranje elementa s određenim ID-om
selektori potomaka - elementi podudaranja koji su potomci određenog elementa
dječji selektori - elementi podudaranja koji su dijete određenog elementa
univerzalni selektori - podudaranje bilo kojeg elementa
susjedni birački selektori - elementi podudaranja koji prethode određenom elementu
atributni selektori - elementi podudaranja s određenim atributom ili vrijednostom atributa
pseudo-klasni selektori - elementi podudaranja s određenim pseudo klase
pseudo-element selektori - elementi podudaranja sa specifičnim svojstvima pseudo-elementa

Formatiranje CSS Stilova i CSS Odabir

Oblik CSS stila izgleda ovako:

selektor {stilski entitet: stil; }

Odvojite više odabira koji imaju isti stil s zarezima. Ovo se naziva grupiranje selektora. Na primjer:

selector1 , selektor2 {stilski entitet: stil; }

Grupiranje selektora je stenografski mehanizam kojim se CSS stilovi smanjuju. Gornja skupina bi imala isti učinak kao:

izbornik1 {stilski entitet: stil; }selektor2 {stilski entitet: stil; }

Uvijek testirajte CSS izbornike

Nisu svi preglednici podržani za sve CSS odabire. Zato svakako provjerite svoje odabire u onoliko preglednika koliko god možete. Ali ako koristite CSS1 ili CSS2 selektore trebali biste biti u redu.