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