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