Вопрос по Селекторы, часть 1 / Дочерние селекторы [8/18]

Курсы §8. Селекторы
1

Почему .places > li { оставляет рамку снизу только под элементов списка первого уровня ? Ведь у них последний тег span, а не li. Вот во 2 задании Выделение жирным должно остаться только у фамилий все в правильно . .places > li > span { ибо фамилии находятся в теге span и он последний . А в первом случае почему только > li сработало ?

Безымянный.png1920×1080 488 KB

2

Перечитайте теорию. Последний тег тут не имеет значение.

3

Все равно не могу понять . Можете обьснять, почему в первом случае .places > li убрало полоску у штрафных и запасных, а снизу оставила ?

4

Обратите внимание на то, что у “родителя” есть потомки: в данном случае - это ВСЁ, что находится между парным тегом ul c классом .places. Однако среди потомков есть ДОЧЕРНИЕ элементы, т.е. особо приближённые к “императору” - а это только li. Как и в обычной жизни - ведь у Ваших родителей дети - это только Вы (и Ваши РОДНЫЕ братья-сёстры). Но ведь ведь Ваши дети и внуки - это ПОТОМКИ тоже Ваших родителей, но никак НЕ их дети. Кстати, Вы - тоже потомок. Т.е. внутри множества потомков есть небольшое множество детей (дочерних элементов). Так и в селекторах: если свойство наследуется, то оно будет у всех потомков, а если нужно передать свойство ТОЛЬКО детям (дочерним элементам), то необходимо использовать >.

7 лайков
5

Спасибо ! наконец то дошло )

1 лайк
6

Я два дня билась над этой задачей и в итоге подглядела ответ. Но не как теперь не пойму, почему li является дочерним элементом класса .places, а не ul, который содержит этот класс как атрибут? Буду очень признательна за пояснение.

7

Но вы же сами говорите, что класс places принадлежит ul. А дочерними элементами считаются вложенные элементы. Дочерними элементами для ul с классом получаются пункты списка li.

8

Большое спасибо за ответ. Я думала, что класс это всего лишь признак тега и его содержимого, вроде описания как всё должно отображаться, а прописывать дочерние элементы нужно от самого тега, например ul > li > span
Т. е. класс, который является атрибутом тега, можно принимать за этот самый тег?

9

Да, для составления правил в css при обращении к элементу по классу подразумевается сам элемент (тег).

10

.places li {
border-bottom: 2px solid #cccccc;
}

.places> li > span {
font-weight: bold;
}
немогу понять

11

я понял

12

С основным заданием я разобрался,но пытаясь оставить к примеру жирным только текст про показатели(0 штрафных и т.д) я не смог этого сделать(делал интереса ради пытаясь понять принцип).Какой елемент тогда выбирать родительским для них?

13

Прочитала все обьяснения здесь и все равно не поняла,
почему .places > li , а не .places > ul?

Ведь если мы выбираем рамку только для нижних строчек, то они “кончаются” перед закрывающим тегом ul.
Если .places > li , то мы выбираем рамки для всех li, а это каждая строчка, а не последняя.

14

Часть вторая.

“Выделение жирным должно остаться только у фамилий.”

Применяю логику правильного ответа первой части, пишу .places > span , то есть: применить жирность ко всем span, которые являются дочерними к places, а это как раз только фамилии. Логика верна.
Но он убирает жирность вообще со всего!:weary::weary::weary:

15

Знак > говорит о том, что вы работаете только со списком первого уровня. В списке первого уровня у вас три li, и каждый подчеркнут снизу.

Потому что .places не является непосредственным родителем для span, которые вы хотите выбирать. Ближайшим родителем для span будет li, поэтому селектор будет .places > li > span (знаки > указывают на первый уровень)

2 лайка
16 
<body>
    <h1>Сводка</h1>
    <ul class="places">
        <li class="first-level">        
            <span>Устюгов</span>
            <ul>
                <li><span>0 штрафных</span></li>
                <li><span>0 запасных</span></li>
            </ul>
        </li>
        <li class="first-level">
            <span>Черезов</span>
            <ul>
                <li><span>0 штрафных</span></li>
                <li><span>2 запасных</span></li>
            </ul>
        </li>
        <li class="first-level">
            <span>Бьёрндален</span>
            <ul>
                <li><span>1 штрафной</span></li>
                <li><span>4 запасных</span></li>
            </ul>
        </li>
    </ul>
</body>

Попыталась наглядно оформить Ваше обьяснение, верно?
Мы обращаемся к li первого класса, а их всего 3 шт

1 лайк
17

А если бы нам надо было выделить жирным только показатели штрафных , то это было бы по логике:
.places > ul > li > span ?
Не подходит(
и .places > ul > li > span тоже

18

Ссылку на задание отправьте мне, пожалуйста.
span штрафных очков, кстати, это не список первого уровня.
Селектор будет таким: .places ul li:first-child > span (выбирается span только внутри первого элемента списка второго уровня).

1 лайк
19
20

Благодарю! Буду дальше вдумываться.