[rory-mccrossan]

You may not need to actually add a class at all. You can select the child divs directly based on the attribute and set the styling on the elements from there.

Here’s an example targeting the difficulty="4" set of elements:

.difficulty-wrapper[data-difficulty="4"] > span.difficulty-item {
  font-weight: 800;
  color: #C00;
}

<div class="difficulty-wrapper" data-difficulty="1">
  <span class="difficulty-item">1-1</span>
  <span class="difficulty-item">1-2</span>
  <span class="difficulty-item">1-3</span>
  <span class="difficulty-item">1-4</span>
</div>

<div class="difficulty-wrapper" data-difficulty="4">
  <span class="difficulty-item">4-1</span>
  <span class="difficulty-item">4-2</span>
  <span class="difficulty-item">4-3</span>
  <span class="difficulty-item">4-4</span>
</div>

[Author]

Posts