Can I select an element by its counter value?

Question

Is it possible to target an element based on its counter value? For example could I bold an element when my-counter is 10? So something like this:

body {
    //initialize the counter with a starting value of 5
    counter-reset: my-counter 5;
}

.some-class::before {
    // increment and insert the counter value in the element
    counter-increment: my-counter;
    content: counter(my-counter);
}

// is something like this possible?

.some-class::before::my-counter(10) {
    // target the element when its counter is 10
    font-weight: bold;
}

For context, I'm doing this to make a responsive list (yes, 12 days of Christmas) where the same day is highlighted at all sizes.

Answer 1

You could either use scripting, or, if the elements are next to eachother, nth-child(x)

div.counted:nth-child(10){
  color: red;
}

<div>
  <div class="counted">1</div>
  <div class="counted">2</div>
  <div class="counted">3</div>
  <div class="counted">4</div>
  <div class="counted">5</div>
  <div class="counted">6</div>
  <div class="counted">7</div>
  <div class="counted">8</div>
  <div class="counted">9</div>
  <div class="counted">10</div>
  <div class="counted">11</div>
</div>