Войти
Регистрация

Поиск селекторов в CSS по содержимому в имени

Поиск селекторов в CSS по содержимому в имени

В этой теме поговорим о том, как задавать стили для элементов сайта с селекторами class или id, которые начинаются, заканчиваются или имеют определенное значение в имени.

Бывают ситуации, когда необходимо задать единые свойства для нескольких элементов, которые имеют похожие названия селектора класса или id, и чтобы не писать каждый в таблице стилей CSS мы будем использовать продвинутый синтаксис.

Представим несколько элементов сайта с id, которые почти одинаковы, за исключением некоторых значений в имени:

<div id="012_block">Какой-то текст в блоке</div>
<div id="013_block">Какой-то текст в блоке</div>
<div id="014_block">Какой-то текст в блоке</div>
<div id="015_block">Какой-то текст в блоке</div>
<div id="016_block">Какой-то текст в блоке</div>

Чтобы задать стиль всем этим элементам мы ищем их по общим оканчивающимся значениям атрибута id:

div[id$="_block"] {
   color:red;
}

$= - атрибут заканчивается определенным значением

Задали красный цвет всем элементам, чьи id заканчиваются на _block

Также мы можем задать стиль всем элементам, чьи id начинаются с определенного значения:

<div id="011_apple">Какой-то текст в блоке</div>
<div id="011_car">Какой-то текст в блоке</div>
<div id="011_home">Какой-то текст в блоке</div>
<div id="011_dog">Какой-то текст в блоке</div>
<div id="011_phone">Какой-то текст в блоке</div>

Задаем стиль всем элементам, чьи id начинаются на 011_

div[id^="_011"] {
   color:blue;
}

^= - атрибут начинается определенным значением

Если у нас атрибут начинается и заканчивается всегда разными значениями, но есть у них общее значение где-то в середине или любое общее значение:

<div id="011product_apple">Какой-то текст в блоке</div>
<div id="012product_car">Какой-то текст в блоке</div>
<div id="013product_home">Какой-то текст в блоке</div>
<div id="014product_dog">Какой-то текст в блоке</div>
<div id="015product_phone">Какой-то текст в блоке</div>

Здесь мы можем найти элементы, у которых атрибут id содержит product и задать им зеленый цвет.

div[id*="product"] {
   color:green;
}

*= - атрибут содержит определенное значением

Эти селекторы можно использовать для любых тегов и любых их атрибутов - class или id

С уважением, Самвел Погосов

Рекомендую к изучению мой бесплатный видеокурс по HTML и CSS для начинающих с подробными видеоуроками и заданиями: Перейти к видеокурсу

Комментарии к статье

Бесплатный видеокурс

HTML и CSS для начинающих

Практический и бесплатный курс по основам HTML и CSS для начинающих. С этим курсом Вы сможете изучить базовые понятия верстки и стилей CSS. Курс с практическими уроками и заданиями, все видеоуроки последовательны и увлекательны. Я научу Вас всему, чему научился сам.

Получить курс
Опрос

Для чего Вы изучаете HTML и CSS?