HTML-koodiga veebisaidi teksti ja sisu paigutamine on ainult üks hoone osa veebisaidi esiosa. Selle protsessi teine suur osa on visuaalse stiili loomine, mida juhib CSS-i reeglid.
Alati, kui ehitame uue veebisaidi või muudame olemasolevas olulisi paigutusmuudatusi, tahame paratamatult, et meie veebisaidi konkreetsed osad näeksid välja teatud viisil. Selleks on oluline mõista, kuidas erinevaid kasutada CSS-i kombinatorid, näiteks CSS järeltulijate valija. See CSS-kombinaator võimaldab veebisaidi suurtel jaotistel saada korraga samu stiilimuutusi.
Mis on CSS-i järeltulijate valik?
CSS järeltulijate selektor on üks neljast erinevast CSS-i kombinatorist. Ühe tühiku () lisamisel kahe valija vahele kehtivad samad stiilielemendid ka teise valija puhul, arvestades, et järeltulijad jagavad sama esimest valijat.
CSS järeltulijate valija mõistmiseks peate kõigepealt seda tegema mõista CSS-i valijaid. Parim viis valija kirjeldamiseks on see, et see on CSS-operaator, mis tuvastab HTML-i tüki, mida proovite kujundada. Seda nimetatakse selektoriks, kuna see "valib" ükskõik millise HTML-i bitiga sama operaatori kui CSS-i vanemal.
Selliste operaatorite levinumad näited on:
div
See on silt, mis määratleb HTML-i jaotise, mis võib sisaldada näiteks lõike ja sisu või:
li
mis on järjestatud loend. Teine sarnane silt on:
ul
See loob tellimata loendi. Keerulisemaid mustreid nimetatakse ka selektoriteks. Lihtsustatult öeldes ütleb CSS-i järeltulijavalik veebisaidile, milline peab välja nägema, kui üks valija on pesitsetud ühise esivanema alla.
Esimesest valijast saab CSS-i vanem ehk esivanem ja teisest järeltulija. Mõelge, kuidas failikataloog töötab: CSS-i vanem on nagu kaust, mis sisaldab muid kaustu, mis võivad sisaldada ka oma kaustu.
Neljast kombinaatorist valib ainsana CSS-i vanema alla pesastatud kõik CSS-i järeltulijate valija. Kombinaatoreid on veel kolm.
- Lapsevalija (ühe tühiku asemel ‘>’) valib ainult elemendid, millele kombinaatoris viitab esimene valija. Kui esimene valija on (div) ja teine valija on (p), valitakse ainult (p) seni, kuni sellel on esivanemana (div). Kui lõik luuakse uue (jaotise) alla, siis isegi siis, kui see on samas (div), stiilireegleid ei peeta.
- Külgnev õdede-vendade valik (ühe tühiku asemel pluss +) valib ainult elemendi, mis on kombinaatori teisele valikule kõige lähemal. Kui esimene valija on (div) ja teine valija (p), valitakse esimene element, mis kasutab (p), kuid mitte (div).
- Õdede-vendade üldvalija (ühe tühiku asemel ~ ~) valib kõik elemendid, välja arvatud need, millele viitab teine valija. Kui esimene valija on (div) ja teine valija on (p), valitakse kõik elemendid, mis pole (p).
Kuidas näeb välja CSS-i järeltulijate valik?
Järgmises näites kahest erinevast CSS-i järeltulijavalijast, mis töötavad kõrvuti, on (div) esimene valija esimeses kombinatoris, samas kui (ul) on esimene valija teises kombinaator. Mõlemas CSS järeltulijavalijas kasutatakse teise valijana (p).
Stiilielemendid (div) ja (ul) erinevad, kuid (p) kannab mõlemal juhul selgelt oma CSS-i vanema tunnuseid.
Miks kasutada CSS-i järeltulijate valijat?
CSS järeltulija valija olulisuse mõistmiseks on kõigepealt mõistlik mõista CSSi pesastatud selektoreid.
Soovime üldiselt, et kogu veebisaidil kehtiksid teatud stiilireeglid, näiteks konkreetne suurus või font, mida kogu lõigu (p) tekst vaikimisi kasutab. Samamoodi võib HTML hakata segaseks minema, kui neid stiilireegleid rakendatakse iga üksiku lõigu, mitte kogu veebisaidi jaoks.
Pesastatud CSS on võimalik CSS-i kombinatorite, näiteks CSS-i järeltulijate valiku abil. CSS-i pesitsemise kaudu vanemvalija alla on võimalik veebisaidile kiiresti ja tõhusalt öelda kuidas konkreetne valija peaks välja nägema igas stsenaariumis, millele CSS-i vanemale viidatakse.
Pesastatud CSS-i valija kasutamine võimaldab meil rakendada saidi mitme sektsiooni kujundamiseks korraga samu reegleid, mis võimaldab meil vähem tööga hakkama saada, hoides samal ajal ka HTML-i puhta ja puutumatu.