it-swarm.com.ru

Как получить CSS для выбора идентификатора, который начинается со строки (не в Javascript)?

Если в HTML есть такие элементы:

id="product42"
id="product43"
...

Как мне сопоставить все эти идентификаторы, начинающиеся с "product"?

Я видел ответы, которые делают это именно с помощью JavaScript, но как это сделать только с помощью CSS?

164
guptron
[id^=product]

^= указывает "начинается с". И наоборот, $= указывает "заканчивается на".

Символы фактически заимствованы из синтаксиса Regex, где ^ и $ означают "начало строки" и "конец строки" соответственно.

Смотрите спецификации для полной информации.

301
Niet the Dark Absol

Я бы сделал это так:

[id^="product"] {
  ...
}

В идеале, использовать класс. Это то, что классы для:

<div id="product176" class="product"></div>
<div id="product177" class="product"></div>
<div id="product178" class="product"></div>

И теперь селектор становится:

.product {
  ...
}
55
Blender

Используйте селектор атрибута

[id^=product]{property:value}
5
Musa

Я заметил, что есть другой селектор CSS, который делает то же самое. Синтаксис выглядит следующим образом:

[id|="name_id"]

Это выберет идентификатор всех элементов, который начинается со слова, заключенного в двойные кавычки.

0
Luigi Spezia