Структура ХТМЛ документа слична је породичном стаблу. У вашој породици имате своје родитеље и друге који су дошли пред вама. Ово су ваши преци. Деца и они који долазе по вас на то дрво су ваши потомци. ХТМЛ ради на сличан начин. Елементи који су унутар других елемената су њихови потомци. На пример, пошто је готово сваки ХТМЛ елемент унутар ознака <боди>, они би били потомци тих <боди> елемената. Овај однос је важан за разумевање када почнете да радите са ЦСС-ом и треба да циљате одређене елементе како бисте применили визуелне стилове.
ЦСС потомци селектора
Селектор селектора ЦСС односи се на елементе који су унутар другог елемента (или тачније наведени, елемент који је потомак другог елемента). На пример, неуређена листа има ознаку са ознакама као потомци. Користимо следећи ХТМЛ као примјер:
<ул> <ли> <а хреф=""> ово је везаЛИ ознаке су потомци УЛ ознаке. Ознака А је потомак оба ЛИ (дјетета потомака) и ознака УЛ (унуцка). Ако размислите о томе размишљајући о томе користећи примјер породичног стабла, <ул> би био родитељ, <ли> биће дијете тог елемента, а <а> биће дијете <ли> и унука од <ул>.
Па како бисте циљали одређене елементе на веб страници користећи ове селекторе потомака? Прво, морате да дефинишете селекторе потомака користећи два (или више) селектора типа раздвојених размацима.
ли {тект-децоратион: ноне; }У том примеру, стилови би се примењивали само на елемент везе (<а>) који је потомак елемента листе ставке (<ли>). Све остале везе на страници које нису потомци листе не би добили овај стил.
Једна важна ствар коју треба запамтити јесте да није битно колико је ознака између ознака које можете користити у вашем селектору потомака. Ако је други елемент затворен било где унутар првог елемента, биће изабран као потомак.
Ако желите да изаберете све сидре који потичу из ул елемената, ви бисте написали:
ул {{тект-децоратион: ноне; }Сада, ови стилови ће се применити на било који линк који је потомак листе. Такође можете написати овај селектор
ул ли {тект-децоратион: ноне; }Ово је потомни селектор који користи више од два селектора типа. У овом случају, ово би се примењивало на линкове који се налазе у оквиру листе као и унутар неуређене листе.
Коришћење селектора класе и селектора ИД-а
Селектори од којих се спуштате не морају увек бити потомци типа. На пример, замислите да сте имали подручје сајта (попут поделе) са атрибутом ИД-а "билборда". Можете подесити потомци селектора тог ИД-а:
#биллбоард ул {бацкгроунд-цолор: #ццц; }Ово би створило неуређену листу која је потомак елемента са ИД-ом "билборда". То можете урадити и за вриједности класе.
див.биллбоард ул {бацкгроунд-цолор: #ццц; }Ово подразумева да подела има класу вредност "билборда". ЦСС изнад би створио елемент <ул> унутар било које подјеле која има ову класну вриједност.
Можете се заиста потрудити и размотрити са потомци селектора. На пример, ако користите Дреамвеавер да напишете свој ХТМЛ код , постоји поставка када додате нова ЦСС правила која ће аутоматски креирати селектор на основу постављања курсора на тој страници. Оно што Дреамвеавер чини у овим случајевима је створити дивљо гломазан и дугачак селектор потомака. Та специфичност није неопходна за рад ЦСС-а . Оно што желите да урадите је пронаћи баланс између селектора потомака који је довољно специфичан тако да можете да се бавите прецизним елементима који су вам потребни (без стила које не желите да утичете) без ЦСС правила која имају селекторе који су претерано велики.