#css_in_action
У вас є декілька однотипних класів: item-1, item-2, item-3 … item-N. Опустимо, чому вони у вас є, це питання іншого штибу, тож у вас є задача — написати селектор, що вибиратиме усі елементи з такими класами.

Перше, що може прийти в голову — використати селектор [class^="item-"]. Він вибиратиме усі елементи, значення атрибуту class якого починається з item-. І це працюватиме, поки ваш клас item- стоїть першим. Щойно ви додасте щось на початок, наприклад warning item-1, селектор "зламається".

Тоді вам в голову може прийти ось таке чудо: [class^="item-"], [class*=" item-"]. Ви додаєте селектор, який додатково ловитиме входження рядка " item-" в значення атрибуту. І це теж буде працювати. Поки у вас не зʼявиться (з якоїсь причини) щось на кшталт class="item-" чи class="item--foo". А вам треба виключно сімейство item-*, бо item--* — це якась дич.

Що ж робити? Ну, на даний момент — засмучуватися. Але ненадовго. Буквально 6 серпня CSSWG погодила додати class prefix selector до Selectors Level 5.

Виглядає він ось так:

.item-* { … }

І має виконувати, по суті, ту ж задачу, але правильно. Тобто не за входженням рядка в рядок, а по class tokens. У пропозала є свої обмеження й переваги, наприклад працює селектор виключно з класами, і на даному етапі список символів, на який він має закінчуватися, обмежується лише дефісами, які, до речі, мають бути обовʼязковою частиною класу, аби селектор спрацював.

Тобто отаке працювати не повинно:

.item_* { … }

Якщо дуже хочете зловити шось бемоподібне, то так і пишіть, позортесь явно:

.item--* { … }

Однак, що цікаво, він має працювати з не дуже звичними роздільниками — табами і новими рядками. Отакі чудасії воно ловитиме:

<div class="primary
item-main">…</div>

Нестинг працюватиме як і зазвичай:

.item-* {
  &:hover {}
  > .icon {}
}

А от на конкатенацію імені розраховувати не варто. Залиште це SCSS, хай вже помре конячка.

.item-* {
  &bar {} /* .item-bar не буде. Бо це неправильний селектор. */
}

До використання цього селектора ще як до неба рачки, звичайно, але будемо мати надію, що цей пропозал швидко пройде всі кола пекла і потрапить до Baseline, бо відверто, я його ждав ще з того часу, як вперше познайомився з CSS. А регулярок мені і в JavaScript вистачає.

А яких селекторів не вистачає вам, товариство? Пишіть в коментарях, не соромтесь.

Що почитати:
The Future of CSS: Class Prefix Selector

Що почитати душнілам:
CSSWG #10001 — Class Prefix Selector proposal
Selectors 5 spec source

@babichdev