Как сделать разный фон одинаковым блокам?

Question

В вёрстке есть список из 8 разных блоков, стилизация у элементов абсолютно одинаковая, за исключением разного фона у каждого. Как их можно залить не добавляя 8 псевдоклассов на каждый из них?

Answer 1

div {
  display: inline-block;
  height: 50px;
  width: 50px;
  background: var(--bg);
}

.my-class {
  background: aquamarine;
}

<div style="--bg: #fff;"></div>
<div style="--bg: #eee;"></div>
<div style="--bg: #ddd;"></div>
<div style="--bg: #ccc;"></div>
<div style="--bg: #bbb;"></div>
<div style="--bg: #aaa;"></div>
<div style="--bg: #999;"></div>
<div style="--bg: #888;"></div>
<div class="my-class" style="--bg: #f00;"></div>

БЛОГ НА HUSL

Как сделать разный фон одинаковым блокам?

Ответы (1 шт):