Как получить 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, спасибо, я выбрал другой ответ, потому что он объясняет мне немного больше и понимает используемые символы. Я не могу использовать классы для этого сценария, иначе да, это было бы лучше.

— Гупрон

5

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

[id^=product]{property:value}

— Musa
источник

-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