Як змусити CSS вибрати ідентифікатор, який починається з рядка (не у Javascript)?

194

Якщо HTML має такі елементи:

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

Як я зіставляю всі ці ідентифікатори, починаючи з "продукт"?

Я бачив відповіді, які роблять це саме за допомогою javascript, але як це зробити лише за допомогою CSS?

html css css-selectors

— гуптрон
джерело

364

[id^=product]

^=вказує "починається з". І навпаки, $=позначає "закінчується на".

Символи фактично запозичені з синтаксису Regex, де ^і $означають відповідно "початок рядка" і "кінець рядка".

Для отримання повної інформації див . Характеристики

— Ніт Темний Абсолют
джерело

1

Дякую за метод та пояснення, я відредагував своє питання, щоб воно було більш зрозумілим. З цікавості, чи є спосіб зіставити рядок всередині рядка id?

— гуптрон

Дивіться технічні характеристики , вони пояснюють це краще, ніж я міг!

— Niet the Dark Absol

@itamar: Я ціную вашу спробу редагування моєї відповіді, але цитата потрібна лише у тому випадку, якщо значення містить символи, які не є дійсним ідентифікатором. productявно є дійсним ідентифікатором, а тому не потребує лапок.

— Niet the Dark Absol

Специфіка цього виду селектора дуже низька

— години

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}

— Муса
джерело

-1

Я помітив, що є ще один CSS-селектор, який робить те саме. Синтаксис такий:

[id|="name_id"]

Це дозволить вибрати всі ідентифікатори елементів, які починаються із слова, укладеного у подвійні лапки.

— Луїджі Спеція
джерело

Як ви помітили? довідник?

— Бен Бозорг

Документ для цього тут: w3.org/TR/selectors-3/#attribute-selectors Тут слід вибрати весь ідентифікатор, який починається або дорівнює "name_id"

— Dessauges Antoine

att|=valНЕ те саме, що att^=val. Зі згаданої посилання: |=Селектор "Представляє елемент з атрибутом att, його значення або саме" val ", або починається з" val ", одразу після цього -" " . |=, але "продукт-42" би.

— Гузак