Как правильно в CSS обратиться к элементам неупорядоченного списка?
Есть блок ( .block ) с неупорядоченным списком внутри. Как правильно в CSS обратиться к элементам списка этого блока: .block ul li <…>или .block li <…>? И так, и так — всё действует. Но как же правильно и почему?
Отслеживать
задан 2 окт 2017 в 16:58
229 2 2 серебряных знака 9 9 бронзовых знаков
Теоретически так .block li <…>быстрее, тк меньше селекторов браузеру надо сравнивать. Не и меньше css получается. Практически удобнее более полное дерево использовать, наглядно понятней. И точно придется использовать полное дерево, если в этом списке будут вложенные списки.
2 окт 2017 в 17:14
Есть ещё предположение, что использование .block ul li <…>может быть обусловлено необходимостью отделить правила конкретно для неупорядоченного списка от упорядоченного, если такой есть (например, .block ol li <…>), а в конструкции .block li <…>мы обращаемся ко всем li , независимо от вида списка.
2 окт 2017 в 17:17
@Artem Gorlachev, не совсем понятно про необходимость использования полного дерева, если в списке будут вложенные списки. Например, если нужно обратиться к элементам списка внутри списка, то конструкция .block li li <…>и .block ul li li <…>действуют равнозначно. Или есть какие-то нюансы?
2 окт 2017 в 17:29
css читается «изнутри», то есть сначала ищется последний элемент вложенности (в нашем случае li ), дальше ищутся родители, по этому чем меньше родителей — тем быстрее отрабатывает построение каскада. Что касается «правильности», то правильно и то и то (собственно этот вывод следует из того, что работает и так и так), в том числе более глубокая вложенность используется для переопределения стилей для отдельных элементов подмножеств каскада.
2 окт 2017 в 19:04
Если внутри списка есть ещё один список, то .block ul li и .block li подействуют на оба списка, а .block > ul > li только на один внешний (а про остальное уже рассказали выше в комментах)
2 окт 2017 в 20:37
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Правильным будет и так и так, главный вопрос: Что быстрее?
1) CSS читается справа налево, то есть в селекторе .block ul li сначала будут найдены все li на странице, дальше отсеются все li которые не вложены в ul , затем из оставшихся отсеются те которые не вложены в .block . Следовательно:
=> Чем меньше вложенность, тем быстрее
2) Разные селекторы имеют разную скорость обработки. Скорость от наибольшей к наименьшей:
- Идентификатор: #id
- Класс: .class
- Элемент: div
- Соседний элемент: h2 + p
- Дочерний элемент: ul > li
- Вложенный элемент: ul li
- Общий селектор: *
- Атрибут: [type=«email»]
- Псевдоклассы/псевдоэлементы: a:hover/a::before
=> Лучше всего использовать идентификаторы или классы (скорость разнится незначительно). В остальном надо ориентироваться на этот список
Собственно на этих принципах и строится основная идеология BEM — минимум вложенности, все стили задаются через классы.
Информация взята с хабры.
Дочерние селекторы
Дочерним называется элемент, который непосредственно располагается внутри родительского элемента. Чтобы лучше понять отношения между элементами документа, разберём небольшой код (пример 12.1).
Пример 12.1. Вложенность элементов в документе
HTML5 CSS 2.1 IE Cr Op Sa Fx
Lorem ipsum Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
В данном примере применяется несколько контейнеров, которые в коде располагаются один в другом. Нагляднее это видно на дереве элементов, так называется структура отношений тегов документа между собой (рис. 12.1).
Рис. 12.1. Дерево элементов для примера
На рис. 12.1 в удобном виде представлена вложенность элементов и их иерархия. Здесь дочерним элементом по отношению к тегу выступает тег
. Вместе с тем тег не является дочерним для тега , поскольку он расположен в контейнере
.
Вернёмся теперь к селекторам. Дочерним селектором считается такой, который в дереве элементов находится прямо внутри родительского элемента. Синтаксис применения таких селекторов следующий.
Селектор 1 > Селектор 2
Стиль применяется к Селектору 2, но только в том случае, если он является дочерним для Селектора 1.
Если снова обратиться к примеру 12.1, то стиль вида P > EM < color: red >будет установлен для первого абзаца документа, поскольку тег находится внутри контейнера
, и не даст никакого результата для второго абзаца. А все из-за того, что тег во втором абзаце расположен в контейнере , поэтому нарушается условие вложенности.
По своей логике дочерние селекторы похожи на селекторы контекстные. Разница между ними следующая. Стиль к дочернему селектору применяется только в том случае, когда он является прямым потомком, иными словами, непосредственно располагается внутри родительского элемента. Для контекстного селектора же допустим любой уровень вложенности. Чтобы стало понятно, о чем идет речь, разберём следующий код (пример 12.2).
Пример 12.2. Контекстные и дочерние селекторы
HTML5 CSS 2.1 IE Cr Op Sa Fx
Дочерние селекторы Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Результат данного примера показан на рис. 12.2.
Рис. 12.2. Цвет текста, заданный с помощью дочернего селектора
На тег в примере действуют одновременно два правила: контекстный селектор (тег расположен внутри ) и дочерний селектор (тег является дочерним по отношению к
). При этом правила являются равносильными, поскольку все условия для них выполняются и не противоречат друг другу. В подобных случаях применяется стиль, который расположен в коде ниже, поэтому курсивный текст отображается красным цветом. Стоит поменять правила местами и поставить DIV I ниже, как цвет текста изменится с красного на зеленый.
Заметим, что в большинстве случаев от добавления дочерних селекторов можно отказаться, заменив их контекстными селекторами. Однако использование дочерних селекторов расширяет возможности по управлению стилями элементов, что в итоге позволяет получить нужный результат, а также простой и наглядный код.
Удобнее всего применять указанные селекторы для элементов, которые обладают иерархической структурой — сюда относятся, например, таблицы и разные списки. В примере 12.3 показано изменение вида списка с помощью стилей. За счёт вложения одного списка в другой получаем разновидность меню. Заголовки при этом располагаются горизонтально, а набор ссылок — вертикально под заголовками (рис. 12.3).
Рис. 12.3. Список в виде меню
Для размещения текста по горизонтали к селектору LI добавляется стилевое свойство float . Чтобы при этом разделить между собой стиль горизонтального и вертикального списка и применяются дочерние селекторы (пример 12.3).
Пример 12.3. Использование дочерних селекторов
HTML5 CSS 2.1 IE Cr Op Sa Fx
В данном примере дочерние селекторы требуются, чтобы разделить стиль элементов списка верхнего уровня и вложенные списки, которые выполняют разные задачи, поэтому стиль для них не должен пересекаться.
Вопросы для проверки
1. Какой цвет будет у жирного курсивного текста в коде
Нормы освещённости построены на основе классификации зрительных работ по определенным количественным признакам.
При использовании следующего стиля?
- Зелёный.
- Синий.
- Оранжевый.
- Оливковый.
- Жёлтый.
2. Какой элемент является родительским для тега ?
3. Для какого тега элемент выступает родителем?
Отступ для всех блоков, кроме первого или последнего
между которыми нужно сделать отступ по высоте, так, чтобы при li < margin-top; >первый элемент списка не сдвигался вниз от края родителя.
Если проще: нужно чтобы для первого li, margin-top не срабатывал.
Тоже самое справедливо и для margin-bottom , только в этом случаи — отступа не должно быть после последнего элемента. Понятно что сдвигаемому элементу можно назначить признак(например дать класс) и уже по нему назначить margin , но неужели в CSS нет отдельного свойства для этого?
Псевдоклассы группы child
Группа этих псевдоклассов позволяет выбирать элементы не по классу или тегу, а по порядковому номеру.
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
Контрибьюторы:
- Светлана Коробцева ,
- Антон Капустинский
Обновлено 25 июля 2022
Кратко
Скопировать ссылку «Кратко» Скопировано
При помощи этих псевдоклассов можно удобно выбирать элементы по их порядковому номеру внутри родительского элемента.
Пример
Скопировать ссылку «Пример» Скопировано
Раскрасим в разные цвета фон у пунктов списка. Обратите внимание, что у всех пунктов списка одинаковые классы, а значит, мы не сможем обратиться к отдельным пунктам при помощи селектора по классу.
У всех пунктов списка будет синий фон:
.list-item background-color: #2E9AFF;>.list-item background-color: #2E9AFF; >
У первого пункта списка (первого дочернего элемента) будет фиолетовый:
.list-item:first-child background-color: #C56FFF;>.list-item:first-child background-color: #C56FFF; >
У последнего пункта списка (последнего дочернего элемента) будет оранжевый фон:
.list-item:last-child background-color: #FF8630;>.list-item:last-child background-color: #FF8630; >
У второго пункта списка будет зелёный фон:
.list-item:nth-child(2) background-color: #41E847;>.list-item:nth-child(2) background-color: #41E847; >
У предпоследнего пункта списка будет розовый фон:
.list-item:nth-last-child(2) background-color: #F498AD;>.list-item:nth-last-child(2) background-color: #F498AD; >
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Есть три суперпростых по своей логике работы псевдокласса из этого набора:
- :only — child — выбирает любой элемент, который является единственным дочерним элементом своего родителя. Можно имитировать аналогичное поведение следующими комбинациями: :first — child : last — child или :nth — child ( 1 ) : nth — last — child ( 1 ) , но зачем так сложно, если можно проще?
- :first — child — выбирает первый дочерний элемент в родителе.
- :last — child — выбирает последний дочерний элемент в родителе.
Псевдоклассы, несущие в себе сочетание букв nth , работают гораздо интереснее. Для их правильной работы нужно указать в скобках паттерн, по которому будут выбираться дочерние элементы.
Звучит сложнее, чем работает. Начнём с простого, с ключевых слов:
- :nth — child ( odd ) — выбирает нечётные элементы внутри родителя, подходящие под левую часть селектора.
- :nth — child ( even ) — выбирает чётные элементы внутри родителя, подходящие под левую часть селектора.
В круглых скобках мы можем указать просто цифру. Таким образом будет выбран соответствующий этой цифре дочерний элемент. Например, :nth — child ( 3 ) выберет третий дочерний элемент, подходящий под левую часть селектора.
Но всё становится гораздо интереснее, когда мы хотим выбрать, к примеру, каждый третий элемент внутри родителя. Используем для этого формулу :nth — child ( 3n ) . Вместо n будет подставляться 0, затем 1, 2 и так далее. В результате умножения в скобки будет подставляться 0, 3, 6, 9, и так до тех пор, пока не закончатся дочерние элементы внутри родителя.
Пойдём дальше и попробуем выбрать каждый шестой элемент, начиная с десятого. Тут нам к умножению на n нужно будет прибавить ещё 10, чтобы отсчёт начался не с 0, а с 10: nth — child ( 6n+10 ) .
Псевдокласс :nth — last — child работает абсолютно аналогично, только счёт ведётся с конца.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� Часто начинающие разработчики пытаются применить эти псевдоклассы к родительскому элементу. Но тут необходимо просто запомнить, что нужно применять псевдоклассы именно к дочерним элементам, из списка которых надо выбрать. При расчёте порядкового номера дочернего элемента учитываются все соседние дочерние элементы, находящиеся на одном уровне с элементом, к которому мы применяем псевдокласс :nth — child , вне зависимости от класса и типа элемента.
�� Часто не получается сразу в уме составить правильную формулу. Не надо стесняться пользоваться калькулятором NTH.