Novitsky
@Novitsky
Веб-разработчик, дизайнер, фотограф

Как в CSS сделать переменную в названии класса?

Здравствуйте.
Интересует, есть ли способ в 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. Поэтому и пришла в голову идея с переменной, но, как это реализовать не знаю.
  • Вопрос задан
  • 152 просмотра
Решения вопроса 1
Novitsky
@Novitsky Автор вопроса
Веб-разработчик, дизайнер, фотограф
Додумался до правильного решения.
Надо вместо :nth-child(1) писать :first-of-type.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@IvanIF
Может конфликт с другими стилями?
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы