Безплатно! Онлайн събитие: От претоварване с информация до фокус и структура с Gemini & NotebookLM Регистрация тук.

Селектори > и +

Пълен достъп до курса: Не

За пълен достъп или безплатна проба (2 модула), моля влезте или се регистрирайте.

HTML5 и CSS3 В курса ще се научите как да създавате съвременни уеб страници с помощта на HTML и CSS. Това обучение е подходящо за напълно начинаещи и ще ви помогне да усвоите основите на уеб разработката, като научите как да създавате структура и стил на уеб страници.

Най-важното за селекторите `>` и `+`

CSS позволява да таргетирате елементи не само по име, клас или ID, а и според тяхната позиция в структурата на HTML. Селекторът за директен наследник (>) избира само елементи, които са непосредствени деца на даден родител. Селекторът за съседен елемент (+) избира елемент само ако той има конкретен предишен съсед. Това ви дава прецизен контрол върху стилизирането и избягва нежелано прилагане на стилове към вложени елементи.

Стъпка по стъпка: как да тествате селекторите

Създайте структура с aside, в който има ul, а в някой от li елементите добавете вложен ul.
Добавете глобален стил за aside ul и вижте, че той се прилага и към вложения списък.
Заменете селектора с aside > ul, за да стилизирате само главния списък (директния наследник).
Добавете стил за li + li и задайте различен цвят.
Забележете, че стилът се прилага само за li, които имат предишен li (т.е. не и за първия елемент в списъка).

Използвани селектори

> – селектор за директен наследник; избира само непосредствените деца на даден елемент.
+ – селектор за съседен елемент; избира елемент, който има конкретен предишен съсед.
aside ul – избира всички списъци вътре в aside, включително вложените.
li + li – избира всеки li, който е непосредствено след друг li.