Постављање текста и садржаја веб странице са ХТМЛ кодом само је један „део“ изградње предњи крај веб странице. Још један велики део овог процеса је стварање визуелног стила, којим се управља правила ЦСС-а.
Кад год направимо нову веб страницу или направимо велике промене распореда на постојећој, неизбежно желимо да одређени делови наше веб странице изгледају на одређени начин. Да бисте то урадили, важно је да разумете како да користите разне ЦСС комбинатори, као што је ЦСС селектор потомака. Овај ЦСС комбинатор омогућава великим одељцима веб странице да одједном приме исте промене стила.
Шта је ЦСС селектор потомака?
ЦСС селектор потомака један је од четири различита ЦСС комбинатора. Када додате један размак () између два селектора, исти елементи стила ће се применити и на други селектор, с обзиром на то да потомци деле исти први селектор.
Да бисте разумели ЦСС селектор потомака, прво то требате разуме ЦСС селекторе. Најбољи начин за описивање селектора је тај што је ЦСС оператор који идентификује део ХТМЛ-а који покушавате да стилизујете. Назван је селектор, јер „бира“ било који бит ХТМЛ-а дели исти оператор као и ЦСС родитељ.
Уобичајени примери таквих оператора су:
див
Ово је ознака која дефинише одељак ХТМЛ-а, који може садржати ствари попут пасуса и садржаја, или:
ли
што је уређена листа. Још једна слична ознака је:
ул
Ово ствара неуређену листу. Сложенији обрасци се називају и селектори. Поједностављено, ЦСС селектор потомака говори веб локацији како да изгледа када је један селектор „угнежђен“ испод заједничког претка.
Први селектор постаје ЦСС родитељ или селектор ’предак’, а други селектор постаје потомак. Замислите како функционише директоријум датотека: надређени ЦСС је попут директоријума који садржи друге фасцикле, које могу садржати сопствене директоријуме.
Од четири комбинатора, једини који бира све што је угнежђено испод одређеног ЦСС родитеља је ЦСС селектор потомака. Постоје још три комбинатора.
- Подређени селектор (‘>’ уместо појединачног размака) бира само елементе на које се односи први селектор у комбинатору. Ако је први селектор (див), а други селектор (п), бира се само (п) све док има (див) као претка. Ако је одломак креиран под новим (одељком), чак и ако је у истом (див), правила стила се не чувају.
- Суседни бирач сестре („+“ уместо појединачног размака) бира само елемент који је најближи другом селектору у комбинатору. Ако је први селектор (див), а други селектор (п), бира се први елемент који користи (п), али не и (див).
- Општи бирач брата или сестре („~“ уместо појединачног размака) бира све елементе осим оних на које се позива други селектор. Ако је први селектор (див), а други селектор (п), бира се сваки елемент који није (п).
Како изгледа ЦСС Десцендант Селецтор?
У следећем примеру два различита ЦСС селектора потомака који раде упоредо, (див) је први селектор у првом комбинатору, док је (ул) први селектор у другом комбинатор. У оба ЦСС селектора потомака, (п) се користи као други селектор.
Елементи стила се разликују између (див) и (ул), али (п) очигледно носи особине свог ЦСС родитеља у оба случаја.
Зашто користити ЦСС Десцендант Селецтор?
Да бисмо разумели важност ЦСС селектора потомака, драгоцено је прво разумети ЦСС угнежђене селекторе.
Генерално желимо да се одређена стилска правила примењују на све веб локације, као што су одређена величина или фонт који подразумевано користи сав текст пасуса (п). Слично томе, ХТМЛ може почети изгледати неуредно ако се та правила стила примењују на сваки појединачни пасус, а не на целу веб страницу.
Угњежђени ЦСС је могућ коришћењем ЦСС комбинатора као што је ЦСС селектор потомака. „Гнежђењем“ ЦСС-а испод родитељског бирача могуће је брзо и ефикасно рећи веб локацији како би требало да изгледа одређени селектор у сваком сценарију на који се односи ЦСС родитељ.
Коришћење угнежђеног ЦСС селектора омогућава нам да применимо иста правила за обликовање више одељака веб локације истовремено, омогућавајући нам да се снађемо са мање посла, а истовремено одржавамо наш ХТМЛ чистим и нетакнутим.