Как задать стили для динамических класов?

Question

[Refguser]

Не могу нагуглить т.к. не знаю даже как это называется.

CMS генерирует классы элементов типа

<div class="form-field myclass0_field form-row">myclass0_field</div>
<div class="form-field myclass1_field form-row">myclass1_field</div>
<div class="form-field myclass2_field form-row">myclass2_field</div>
<div class="form-field myclass3_field form-row">myclass3_field</div>

Отличаются только цифрами

Как одним правилом задать стили всем таким элементам?
По каким ключам гуглить?

Answer 1

[Алексей Ярков]

[class^="myclass"] { color: red; }

Рабочий пример: https://codepen.io/yarkovaleksei/pen/ExMvwqb

не знаю даже как это называется

CSS селекторы

Comments

[Refguser]

Это не работает
Во всяком случае в такой конструкции

.form-field.[myclass]_field.form-row {
..
}

Возможно "_field" значимое условие. Исправил вопрос.

CSS селекторы

Что "селекторы"? Речь про цифры в классах.

[Алексей Ярков]

Refguser,

Во всяком случае в такой конструкции

HTML разметку в студию

Что "селекторы"? Речь про цифры в классах

Специально для упёртых:
https://htmlacademy.ru/blog/css/selectors
https://developer.mozilla.org/ru/docs/Web/CSS/CSS_...
https://developer.mozilla.org/ru/docs/Learn/CSS/Bu...

[Refguser]

Алексей Ярков,

HTML разметку в студию

В вопросе.

Специально для упёртых:

Я благодарен за попытку помочь, но хамить не нужно. Я без тебя знаю что такое селекторы. Я не знаю как называется способ (или что) когда в классах задаётся, а в селекторах (каких если на то пошло?), соответственно. указывается ДИНАМИКА (цифры).

[Алексей Ярков]

Refguser,

а в селекторах (каких если на то пошло?)

В CSS селекторах, других нет. Я в ответе указал рабочий способ. Сейчас и ссылку добавил.

[Refguser]

Алексей Ярков, по поводу разметки, а точнее доп классов - мой косяк. Не мог и представить что добавление классов может повлиять на работу стилей... Это вообще странно..

Исправил вопрос. В таком виде (с доп. классами) такая конструкция уже не работает.
Как не работает и

.form-field.[class^="myclass"].form-row { color: red; }

и

.form-field.[class^="myclass"]_field.form-row { color: red; }

тоже не фурычит.

[Алексей Ярков]

Refguser,

[class*="myclass"][class*="_field"] { color: red; }

Других вариантов кажется нет

[Refguser]

Алексей Ярков, вот так сработало

[class*="myclass"][class*="_field"].form-field.form-row { color: blue; }

Но я не уверен, что не отразиться в других местах/на других элементах с _field и myclass.
Ведь я так до сих пор и не знаю как эта конструкция в квадратных кавычках называется, что именно в манах почитать..

Ладно, спасибо за помощь, попробую ещё погуглить..

[Алексей Ярков]

Refguser,

что именно в манах почитать..

CSS селектор атрибута ))

[Refguser]

Алексей Ярков,

CSS селектор атрибута

ВОТ! Селектор атрибута же, а не селектор..
Спасибо.

Хотя кмк правильнее "Атрибуты селектора", а не "Селектор атрибута"

[Ankhena]

Refguser,

Хотя кмк правильнее "Атрибуты селектора", а не "Селектор атрибута"

У селектора нет атрибутов.
Атрибуты есть у тегов.
И вот селекторы выбирающие элементы по атрибутам так и называются "селекторы по атрибутам" или "селекторы атрибутов". Второе получено более простым переводом attribute selectors.

[Refguser]

Ankhena,

У селектора нет атрибутов.
Атрибуты есть у тегов.

:) Всё верно, но есть маленький нюанс. Теги - это в HTML, а в CSS - селекторы. Поэтому "атрибуты тега" (в HTML) в CSS логично называть "атрибутам селектора". ИМХО.

Но не суть. Назвали так назвали.. Так и будем называть. Не первая такая коллизия с названиями-переводами. И не последняя.

[Ankhena]

Refguser, нет, не логично.
Селектор (выбирает) по классу, селектор по тегу, селектор по атрибуту и т. д.

Но вы можете придерживаться своего мнения. Только на собеседованиях лучше такого не говорить.