Возможно ли динамическое создание и название класса в CSS?

Question

[Soniked]

Добрый день.

Возможно ли динамическое название стиля в CSS?

Например, у меня есть классы "element1", "element2", "element3".
Так же есть классы "sub-element1", "sub-element2", "sub-element3". Они зависят и формируются в зависимости от псевдокласса :checked первичных элементов.
Я упомянул 3 пары элементов. Но по факту таких пар может оказаться 5, 10, а может и 25.

Есть ли какой-то инструмент, чтобы можно было динамически создавать связку классов двух элементов, а не расписывать стили для каждого класса отдельно?

Comments

[Softlink]

Если вам надо автоматически сгенерировать классы по одному паттерну, то поможет for любого препроцессора(пример для scss). Однако предполагаю, что у вас только классы разные, а оформление у всех одинаковое, поэтому лучше сделать отдельные классы для стилизации корневого элемента и вложенных в него потомков и не раздувать css одинаковыми стилями.

[Сергей delphinpro]

динамическое название стиля

формируются в зависимости от псевдокласса

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

Да нет таких терминов у нас. А значит никто не понимает чего вам нужно.
Вы лучше пример кода покажите, и объясните простыми человеческими словами задачу.

Answer 1

[Steppp]

Так в css и задавай классы через запятую

.element1, sub-element1 {
  css стили применятся к 2м блокам! Так же можешь еще через запятую добавить классы
}

Либо в html задай 2 класса

<div class="element1">
<div class="element1 sub-element1">
.element1 {
  основные стили
}
.sub-element1 {
 дополнительные стили
}

Comments

[Soniked]

А если у меня sub-element формируется с помощью псевдокласса :checked первичного элемента?

[Steppp]

.element1:checked, sub-element1 {
  Я не совсем понимаю что вы хотите сделать. 
  Тоесть есть блок, при наведении\нажатии на него,
   появляется такой же блок? 
}

[Soniked]

Steppp, у меня формируется страница с категориями и выпадающим списком элементов, относящихся к категориям. Категорий, как и элементов в них может быть много.

[Steppp]

<div class="categories">
	<a href="#" class="link">1</a>
	<a href="#" class="link">1</a>
	<a href="#" class="link">1</a>
</div>
<div class="categories">
	<a href="#" class="link">1</a>
	<a href="#" class="link">1</a>
	<a href="#" class="link">1</a>
</div>
<div class="categories">
	<a href="#" class="link">1</a>
	<a href="#" class="link">1</a>
	<a href="#" class="link">1</a>
</div>

.categories {
	width: 100%;
}
.link {
	color: green;
}
.link:hover {
	color: red;
}

Answer 2

[Юрий]

SASS, например.