11/20

Курсы §18. Селекторы. Часть 2
1

Здравствуйте.
У меня вопрос.
Почему комбинация li span не подходит для задачи
"№2 - Увеличьте размер всех непустых карт: ширина 60px, высота 90px.", нужно указать именно li(:not)?

    ul:empty{
        height:70px;
        border:2px dashed #55bb99;
        }
    li:not(:empty){ /*второй пункт задачи*/
        width:60px;
        height:90px;
        }
    li span{
        display:block;
        }

Код html
[details=Summary]







    • A








    • Q

    [/details]
    2

    т.е. это в рамках обучение такое условие? потому что в обычной жизни это бы сработало =)

    3

    Перечитайте, что просят увеличить. Нужно выбрать li. А селектор li span выбирает уже span.

    4

    не понял, span только там где НЕ пустые карты:

    [details=Summary]

  • Q

  • A
    • [/details]
    в этом случае получается что
    li:not(:empty) = li span
    я проверил на codepen, там эти значения равны по смыслу, работает и так и так. другое дело если в данном уроке НУЖНО указать li:not(:empty)
    5

    И всё-таки вы не правы. Давайте еще раз. Какой элемент(тег) по факту выбирается в первом и во втором случае?

    6

    в первом li выбирается НО не пустой, т.е. там может быть что угодно, не только span
    а во втором li но только со span
    или я не правильно вопрос понял? :slight_smile:

    7

    Нет, во втором случае выбирается span - span, который находится внутри li. Селектор читается справа налево.

    8

    можете еще пример какой-нибудь написать? чтоб я в сравнении посмотрел, если не сложно

    9

    Пример чего?

    10

    пример кода, я что-то запутался
    а-а-а, все, дошло, я понял, а мне нужна была строка, а я выбирал тег спан, верно?

    11

    Смотря что вы называете строкой)

    12

    тьфу, карту, не строку =)

    13

    Да, правильно. Карта = li.

    1 лайк
    14

    благодарю за терпение))) и пояснение

    15

    Подскажите, пожалуйста, почему тогда в этом задании срабатывает код (увидела в комментариях):

    span:not(:empty) {
    display: block
    }

    Тут ведь нет li. И при этом не срабатывает просто span, хотя, с моей точки зрения, :not(:empty) здесь абсолютно лишний, у нас же всего 2 спана и все они непустые.

    2 лайка