Struktura HTML dokumenta slična je porodičnom stablu. U vašoj porodici imate roditelje i druge koji su došli pred vama. Ovo su vaši preci. Deca i oni koji dolaze za tobom na to drvo su vaši potomci. HTML radi na sličan način. Elementi koji su unutar drugih elemenata su njihovi potomci. Na primer, pošto je gotovo svaki HTML element unutar oznaka
, oni bi bili potomci tih elemenata. Ovaj odnos je važan za razumevanje kada počnete raditi s CSS-om i trebate ciljati određene elemente kako biste primijenili vizuelne stilove.CSS potomci selektora
Selektor selektora CSS odnosi se na elemente koji su unutar drugog elementa (ili tačnije navedeni, element koji je potomak drugog elementa). Na primjer, neuređena lista ima oznaku sa oznakama kao potomci. Koristimo sledeći HTML kao primjer:
- ovo je veza li> ul>
LI oznake su potomci UL oznake. Oznaka A je potomak oba LI (djeteta potomaka) i oznaka UL (unuka potomaka). Ako razmislite o tome razmišljajući o tome koristeći primjer porodičnog stabla,
- bi bio roditelj,
- bi bio dijete tog elementa, a bi bio dijete
- i unuka
- .
- ). Sve ostale veze na stranici koje nisu potomci liste ne bi dobili ovaj stil.
Pa kako biste ciljali određene elemente na web stranici koristeći ove selektore potomaka? Prvo, morate definisati selektore potomaka koristeći dva (ili više) selektora tipa razdvojenih razmacima.
li {{text-decoration: none; }U tom primeru, stilovi bi se primenjivali samo na element veze () koji je potomak elementa liste stavke (
Jedna važna stvar koju treba zapamtiti jeste da nije važno koliko oznaka nalaze između oznaka koje možete koristiti u vašem selektoru potomaka. Ako je drugi element zatvoren svuda u okviru prvog elementa, biće izabran kao potomak.
Ako želite odabrati sve sidra koji potiču od ul elemenata, vi biste napisali:
ul {{text-decoration: none; }Sada, ovi stilovi će se primeniti na bilo koji link koji je potomak stavke liste. Takođe možete napisati ovaj selektor
ul li {{text-decoration: none; }Ovo je potomni selektor koji koristi više od dva selektora tipa. U ovom slučaju, ovo bi se primenjivalo na linkove koji se nalaze u okviru liste kao i unutar neuređene liste.
Korišćenje selektora klasa i selektora ID-a
Selektori od kojih se spuštate ne moraju uvek biti potomci tipa. Na primjer, zamislite da imate područje stranice (poput podjele) sa atributom ID-a "bilborda". Možete podesiti potomci selektora tog ID-a:
#billboard ul {background-color: #ccc; }Ovo bi stvorilo neuređenu listu koja je potomak elementa sa ID-om "bilborda". To možete uraditi i za vrijednosti razreda.
div.billboard ul {background-color: #ccc; }Ovo podrazumijeva da podjela ima klasičnu vrijednost "bilborda". CSS iznad bi stvorio element
- unutar bilo koje podjele koja ima ovu klasnu vrijednost.
Možete se zaista potruditi i razmotriti sa potomci selektora. Na primer, ako koristite Dreamweaver da napišete svoj HTML kod , postoji postavka kada dodate nova CSS pravila koja će automatski kreirati selektor na osnovu postavljanja kursora na tu stranicu. Ono što Dreamweaver čini u ovim slučajevima je stvoriti divljo glomazan i dugačak selektor potomaka. Ta specifičnost nije neophodna za rad CSS- a. Ono što želite učiniti je pronalaženje ravnoteže između selektora potomaka koji je dovoljno specifičan tako da možete smanjiti tačne elemente koji su vam potrebni (bez onih koji ne želite da utičete) bez CSS pravila koja imaju selektore koji su preterano veliko.
- i unuka
- bi bio dijete tog elementa, a bi bio dijete