Контекстные селекторы

Селектор потомка

Пишем 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

Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:

Источник