Как с помощью CSS селектора выбрать все элементы у которых есть data- атрибуты?

Question

[Алексей Сегодин]

Задача 1:
выбрать все элементы из списка у которых есть хоть какой-то data-... атрибут. При этом, не важно что будет стоять после data- — значений может быть бесконечное множество и хардкод тут не пройдёт.

<ul>
    <li></li>
    <li data-color=""></li> <!--искомый элемент-->
    <li data-weight=""></li> <!--искомый элемент-->
    <li></li>
    <li data-xyz=""></li> <!--искомый элемент-->
</ul>

Задача 2:
выбрать все элементы у которых есть совпадение по data-my-. Например:

<ul>
    <li></li>
    <li data-my-color=""></li> <!--искомый элемент-->
    <li data-weight=""></li>
    <li></li>
    <li data-my-xyz=""></li> <!--искомый элемент-->
</ul>

Может можно сделать это как-то с помощью regex? Я до сих пор находил примеры regex в CSS только для значений атрибутов, но не для их названий.

Заранее спасибо!

Comments

[sim3x]

Почему не сделать

/
    <li data-param="my-color" data-param-val="123"></li> <!--искомый элемент-->
    <li data-param="weight" data-param-val="123"></li>

[Алексей Сегодин]

sim3x, это примерно то же самое, что предложил Сергей Мелодин в качестве дополнительного атрибута. Как вариант это может быть альтернативным решением. Но хотелось сначала узнать есть ли более изящный способ решения проблемы.

[sim3x]

Алексей Сегодин, Насколько я понимаю, нельзя сделать выборку по названию аттрибута с маской

[Сергей Мелодин]

Алексей Сегодин, посмотрел некоторые заметки по CSS4 и там такого даже в планах не написано. Так что ещё изящнее способа (видимо) нет и не будет. Но можно ещё узнать что предлагают препроцессоры.

Answer 1

[Сергей Мелодин]

Так речь о css-выборке или всё-таки js? На чистом CSS регулярок нет (насколько мне известно), но можно делать выборки типа [data-val*=someVal] или [data-val^=someVal].

Как вариант использования чистого css - задай им одинаковый атрибут, например, name или class.

Ну, а если JS, то нужно сначала выбрать все li и получить их аттрибуты, а даже уже регуляркой сравнивать, начинаются ли они с data. Примерно как это может быть реализовано: https://jsfiddle.net/bmqxqdu0/

Comments

[Алексей Сегодин]

Речь именно о CSS выборке.
Метод с JS мне известен, но я бы предпочел без него.

[Сергей Мелодин]

Алексей Сегодин, тогда одинаковый атрибут - твой вариант. Выборка по частичному совпадению значения - это не регулярки. Можно даже задать дополнительный атрибут без значения, например data-some-fucking-attr и выбирать по нему: li[data-some-fucking-attr]