- Селектор потомка
- Кратко
- Пример
- Как понять
- Как пишется
- Подсказки
- На практике
- Алёна Батицкая советует
- Контекстные селекторы
- Вопросы для проверки
- Вложенность в CSS
- Cинтаксис
- Минусы использования вложенности
- Разберем на примере комбинированных селекторов:
- В чём отличие class от id?
- Как правильно писать вложенность в SCSS?
- Как сократить код CSS
- Методология БЭМ в CSS
- Компоненты в коде
- Название элементов
- Избегайте селекторов по тегу
- Заключение
- Выбор элементов внутри других элементов на CSS.
Селектор потомка
Пишем CSS-селектор так, чтобы стилизовать вложенные элементы.
Время чтения: меньше 5 мин
Кратко
Скопировать ссылку «Кратко» Скопировано
Цепочка перечисленных через пробел селекторов обозначает вложенность от родительских элементов к потомку. Это позволяет управлять стилями вложенных элементов.
🤖 Такие вложенные селекторы используются, если нужно задать разные стили для элемента на всей странице и для элемента внутри определённого блока.
Пример
Скопировать ссылку «Пример» Скопировано
Скажем, цвет текста в абзацах карточки новостей должен отличаться от текста на всей странице. При этом все остальные стили для абзацев одинаковые.
Если вам скажут.
Все новости должны быть такими
У пингвинов, живущих в Московском зоопарке.div class="wrapper"> p class="text">Если вам скажут. p> div class="news-card"> h2 class="news-card__title">Все новости должны быть такимиh2> p class="text news-card__text"> У пингвинов, живущих в Московском зоопарке. p> div> div>
Стили текста для всей страницы:
.text color: #ffffff; line-height: 1.4;>
.text color: #ffffff; line-height: 1.4; >
Стили для текста, вложенного в блок .news — card :
.news-card .text color: #000000;>
.news-card .text color: #000000; >
Как понять
Скопировать ссылку «Как понять» Скопировано
Часто пробел не имеет особого значения. Но не в CSS. При написании стилей пробел между селекторами является указателем взаимоотношений между элементами.
При чтении вложенного селектора первая часть указывает на родительский элемент, а последующие — на вложенные.
Подробнее можно прочитать в статье «Специфичность».
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Всё просто! Берём один селектор. Берём второй селектор. Соединяем их при помощи пробела. Profit! 😉
Подсказки
Скопировать ссылку «Подсказки» Скопировано
💡 Кроме пробела есть разные комбинаторы для соединения двух селекторов: + , ~ , > . Подробнее о них можно почитать в статье «Комбинированные селекторы». Но чаще всего вы будете пользоваться именно пробелом.
💡 Вложенный селектор имеет больший вес, чем селектор, состоящий из одного класса. Из-за этого могут возникнуть сложности с переопределением стилей.
💡 Если разметка написана оптимально, и вы используете одну из методологий, то, скорее всего, обойдётесь в своих стилях вообще без вложенных селекторов.
На практике
Скопировать ссылку «На практике» Скопировано
Алёна Батицкая советует
Скопировать ссылку «Алёна Батицкая советует» Скопировано
🛠 Можно перечислять сколько угодно классов, спускаясь ниже и ниже по дереву вложенности элементов, но селекторы с более чем двумя составляющими сложно читать. И если нужен более сложный селектор, то это повод пересмотреть HTML-разметку и проверить её целесообразность.
Контекстные селекторы
При создании веб-страницы часто приходится вкладывать одни теги внутрь других. Чтобы стили для этих тегов использовались корректно, помогут селекторы, которые работают только в определённом контексте. Например, задать стиль для тега только когда он располагается внутри контейнера
. Таким образом можно одновременно установить стиль для отдельного тега, а также для тега, который находится внутри другого.
Контекстный селектор состоит из простых селекторов разделенных пробелом. Так, для селектора тега синтаксис будет следующий.
В этом случае стиль будет применяться к Тегу2 когда он размещается внутри Тега1, как показано ниже.
Использование контекстных селекторов продемонстрировано в примере 10.1.
Пример 10.1. Контекстные селекторы
HTML5 CSS 2.1 IE Cr Op Sa Fx
Жирное начертание текста Одновременно жирное начертание текста и выделенное цветом
В данном примере показано обычное применение тега и этого же тега, когда он вложен внутрь абзаца
. При этом меняется цвет и шрифт текста, как показано на рис. 10.1.
Рис. 10.1. Оформление текста в зависимости от вложенности тегов
Не обязательно контекстные селекторы содержат только один вложенный тег. В зависимости от ситуации допустимо применять два и более последовательно вложенных друг в друга тегов.
Более широкие возможности контекстные селекторы дают при использовании идентификаторов и классов. Это позволяет устанавливать стиль только для того элемента, который располагается внутри определённого класса, как показано в примере 10.2.
Пример 10.2. Использование классов
HTML5 CSS 2.1 IE Cr Op Sa Fx
Русская кухня | Украинская кухня | Кавказская кухня Другие материалы по теме
Результат данного примера показан на рис. 10.2.
Рис. 10.2. Ссылки разных цветов
В данном примере используется два типа ссылок. Первая ссылка, стиль которой задаётся с помощью селектора A , будет действовать на всей странице, а стиль второй ссылки ( .menu A ) применяется только к ссылкам внутри элемента с классом menu .
При таком подходе легко управлять стилем одинаковых элементов, вроде изображений и ссылок, оформление которых должно различаться в разных областях веб-страницы.
Вопросы для проверки
1. Какой цвет будет у текста списка в следующем коде?
2. В коде выше какого цвета будут маркеры перед текстом?
Вложенность в CSS
При написании тегов HTML часто бывает необходимо вкладывать теги друг в друга, но огромное дерево DOM очень плохо влияет на оптимизацию страницы. Чтобы «приблизиться» к желаемому тегу класса, может быть полезно использовать вложенные селекторы.
Таким образом, вы можете установить стиль для одного тега и для тега, который находится в другом одновременно. Но с вложенными селекторами 2 и более структура становится огромной.
Cинтаксис
Минусы использования вложенности
Вы знаете как осуществляется работа подключения стилей? При загрузке html разметки, css свойства по порядку проходят по DOM – дереву разметки, периодически добавляя им стили. Сейчас представьте, если вложенность в DOM больше 10 и стили имея вложенность, каждый раз, когда сравнивают порядок тегов, классов, id. Какая большая нагрузка идёт. По итогу получается большое время ожидание при загрузке сайта.
Разберем на примере комбинированных селекторов:
CSS код:
.search.search_theme_light Color:blue;
>
Если добавить модификатор к элементу описанному выше, то он не перепишет стиль из-за вложенности в css.
.search_active
Данный модификатор сработает лишь, в том случае, если описать его так:
.search.search_disabled <>
Верное использование классов в css. Нужно стремиться к простому виду селекторов классов:
.body_position_fixed <>
.body_scroll-active <>
А при большом наименовании классов к примеру: main-blog-item__description-img.
При таких классах с использованием вложенности, вы зайдя в проект через неделю забудете где, что и как лежит/работает.
Теперь перейдите в один из ваших проектов и проверьте код, там должно быть минимальное количество вложенных селекторов. Вложенные селекторы повышают согласованность кода и предотвращают повторное использование.
При использовании вложенных селекторов важно соблюдать правило инкапсуляции: мы создаем блок, когда возможно повторение и элемент находится внутри блока.
Вложенность подходит, если вам нужно изменить стили элементов в зависимости от модификатора (например, состояния конкретного блока или темы)
Важно: Для того, чтобы перебивать стили класса, нужно код разместить ниже класса!
Чтобы грамотно пользоваться перебиванием стилей нужно знать приоритеты селекторов. Старайтесь не создавать css с множеством использования !important, так как это показывает, что ваш код “неправильный” и в нем есть ошибки. Бывают конечно же исключения из правил.
- *- 0 0 0
- style — 1 0 0 0
- !important — больше 1 0 0 0
- #id — 0 1 0 0
- class — 0 0 10
- [ attr=val ] — 0 0 10
В чём отличие class от id?
Основное отличие, один и тот же Class можно использовать повторно и применять в любом месте. Id – это уникальное имя, которое будет использовано один раз.
Свойства описанные в css через id буду иметь больший вес, чем свойство имея class. Веса селекторов вы могли видеть выше.
.class /*этот класс будет работать в любом теге*/
p#id /*id применится ко всем p, но если будут дубликаты этого id*/
Как полезно использовать id не делая из них описание стилей, это добавление в элементы, которые будут обработаны скриптами. Наш любимый друга JavaScript, id будет гораздо легче найти и не создавать кучу функций.
Вывод: Для JavaScript отличный вариант использовать id, а для других целей попробуйте обойтись классом, только в самых редких случаях можно пренебречь id.
Как правильно писать вложенность в SCSS?
Если необходимо использование вложенности в проекте, то указываем сначала родителя, затем дочерний элемент. Внутри складываем блоки по иерархии.
Представим ситуацию, у вас большой проект и в нём нужно использовать несколько вложенности. Не используя препроцессор будет полная каша в коде, особенно, если классы будут состоять из 2-3 слов. Как не нужно писать вложенность (данный способ можно использовать, если вы не знаете препроцессоры less/sass/scss)
На изображении показана верная вложенность в препроцессоре scss. Согласитесь, что это более структурировано и понятно?!
Как сократить код CSS
Сокращение лишнего и удаление не используемого/дублирующего код приведет к повышенной производительности проекта. Для этого можно использовать несколько вариантов сборщиков проектов.
Преимущества данных сборщиков заключается в структуре и быстроте написания кода. Разбивая все компоненты по папкам со стилями и скриптами, вы получаете понятную структуру проекта
Позволяют соединять действия и состояния нескольких блоков без дублирования
Методология БЭМ в CSS
- Игнорировать структуру DOM и изучить как правильно создавать блоки;
- Уменьшите количество вложенности в селектарах;
- Используйте единство в названии классов, чтобы не было конфликтов имен и сделать имена селекторов как можно более подробными и понятными;
- Во избегания конфликтов имен, нужно использовать единство в именах классов. А названия делать ясными и не делать упор на внешний вид, а на информативность;
- Работать в едином плане блоков, элементов и модификаторов;
- Использовать смеси;
- Разгруппировать код на небольшие кусочки для удобной работы с отдельными блоками
- Блоки – это подобие компонентов, которые могут повторяться. Если элементов одинаковых 2 и более, то делаем блок.
Компоненты в коде
Для избегания повторения кода просмотрите макет сначала до конца. Разбирая блоки и стили, которые повторяются несколько раз. Компоненты именуются двумя и более словами, с дефисом между ними.
Название элементов
Каждый компонент может содержать элементы. Они описываются классами в их именах словом.
Избегайте селекторов по тегу
Используйте имена классов, где это возможно. Селекторы по тегу прекрасны, но они могут снизить эффективность и могут быть малоинформативны.
Заключение
Вложение необходимо в элементы, где оно не может существовать отдельно. Кроме того, вложение идеально подходит для псевдоэлементов и псевдоклассов: before, after, hover, focus, visited и тд. Надеемся, что теперь ваш код станет понятным и комфортным в использование другим разработчикам. Повышайте свои скиллы и пишите красивый код. Желаем успехов!
Выбор элементов внутри других элементов на CSS.
На практике, при работе с CSS, часто может стоять такая задача, что нужно выбрать какой-то элемент на веб-странице, который находится внутри другого элемента.
Предположим, у нас есть элемент table.
Элемент 1 | Элемент 2 | Элемент 3 |
В нем есть вложенные элементы tr и td.
Давайте создадим еще одну аналогичную таблицу, но с >
Элемент 1 | Элемент 2 | Элемент 3 |
Предположим, что у нас стоит задача, сделать все элементы td внутри table1 синим цветом, а все элементы td внутри table2 красным цветом.
Причем, у элемента td нет никакого класса и идентификатора, по которому можно было бы сделать выборку.
Давайте подумаем как можно решить эту задачу.
Если просто воспользоваться селектором td, то мы не сможем с вами отделить элементы td внутри первой и второй таблицы.
Решить эту проблему поможет специальный синтаксис CSS, который позволяет выбирать элементы внутри других элементов.
Для этого сначала, мы используем селектор идентификатора и для того, чтобы указать, что мы хотим обратиться к какому-то элементу, который находится внутри другого элемента, нужно воспользоваться знаком пробел.
Этой записью мы говорим, что нужно применить стили CSS к элементу td, который находится внутри элемента с >
С селекторами CSS, которые позволяют обращаться к элементам внутри других элементов приходиться встречаться довольно часто на практике. Попробуйте и поэкспериментируйте с этим, в будущем, это может пригодиться.
Дмитрий Ченгаев 💎
Занимаюсь заказной веб-разработкой. Подписывайтесь на телеграм канал https://t.me/dchengaev 😉
2022-03-24
Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через: