Сегодня приводим пример из практики, как решается задача применения стилей к элементам с id начинающимся с определенного текста.
Страница сайта создана в конструкторе для WP Elementor. В заголовках табов присутствуют id, причем для десктопов они начинаются с
elementor-tab-title-(далее номер)
, для мобильных - с elementor-tab-content-(далее номер)
. Необходимо, чтобы при переходе к табам заголовок таба не "скрывался" за верхним зафиксированным меню. Т.е. нужен отступ при скролле до табов.
Если значение атрибута (идентификатора) тега начинается с определенного текста, используем синтаксис:
[атрибут^="значение"] { правила стиля }
или
Селектор[атрибут^="значение"] { правила стиля }
В нашем случае получилось:
[id^="elementor-tab-title-"], [id^="elementor-tab-content-"] {
scroll-margin: 150px;
}