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

194

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

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

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

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

html css css-selectors guptron
источник

Ответы:

364 
[id^=product]

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

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

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

Ницца Темный Абсол
источник
1
Спасибо за метод и объяснение, я отредактировал свой вопрос, чтобы он был более понятным. Из любопытства, есть ли способ сопоставить строку внутри строки идентификатора?
Гуптрон
Смотрите спецификации , они объясняют это лучше, чем я мог!
Niet the Dark Absol
@itamar: Я ценю вашу попытку отредактировать мой ответ, но цитата требуется только в том случае, если значение содержит символы, которые не являются допустимым идентификатором. productявно допустимый идентификатор, и поэтому не нуждается в кавычках.
Niet the Dark Absol
Специфика этого типа селектора очень низкая
nuander
3
@ Emerald214:not([id^=product])
Niet the Dark Absol
59

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

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

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

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

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

.product {
  ...
}
смеситель
источник
1
@Blender, спасибо, я выбрал другой ответ, потому что он объясняет мне немного больше и понимает используемые символы. Я не могу использовать классы для этого сценария, иначе да, это было бы лучше.
Гупрон
-1

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

[id|="name_id"]

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

Луиджи Специя
источник
Как ты заметил? ссылка?
Бен Бозорг
Док для этого здесь: w3.org/TR/selectors-3/#attribute-selectors Это должно выбрать все id, которые начинаются или равны "name_id"
Dessauges Antoine
att|=valэто не то же самое, что att^=val. Из упомянутой ссылки: |=Селектор "Представляет элемент с атрибутом att, его значение либо точно равно" val ", либо начинается с" val ", за которым сразу следует" - " ." Таким образом, идентификатор, такой как "product42", не будет соответствовать |=, но "товар-42" был бы.
Goozak