Здравствуйте.
Интересует, есть ли способ в CSS сделать переменную в названии класса?
Например, есть класс
.article
в название которого автоматически добавляется число:
.article-1
,
.article-2
...
.article-66
и т. д. Необходимо им всем добавить, например, одинаковый цвет текста:
.article-(n) {color:red}
. Как это можно сделать средствами CSS?
Предвижу вопрос «Зачем так сложно?». Дело в том, что есть некая конструкция:
<article class="post article-1">
<p></p>
<p></p>
<p></p>
</article>
<article class="post article-2">
<p></p>
<p></p>
<p></p>
</article>
...
<article class="post article-66">
<p></p>
<p></p>
<p></p>
</article>
Нужно первую букву в первом абзаце каждой статьи окрасить в определенный цвет.
Я пытался сделать так:
.post p:nth-child(1)::first-letter {
color: red;
}
Но окрашивается первая буква, почему-то, только в первой статье с классом
.post
. Поэтому и пришла в голову идея с переменной, но, как это реализовать не знаю.