reuse template with slide specific highlighting?

[ratnanil]

I'm using remark to solve a problem that couldn't solve with any other software till now. I've specified a template slide that I reuse throughout my slides (e.g. "the points we will cover today"), but every time I reuse the slide I want to highlight a specific point.

Since I'm a css / html newb, the way I'm doing this now is as follows:

(see also http://jsfiddle.net/zjb5a92g/)

my question: is there a more elegant approach to this (especially concerning the css part)

html

<textarea id="source">
name: points
layout: true

<ul>
  <li id = "first">first</li>
  <li id = "second">second</li>
  <li id = "third">third</li>
  <li id = "fourth">fourth</li>
</ul>

---
template: points
class: first

</textarea>

css

.first #first, 
.second #second, 
.third #third,
.fourth #fourth,
.fifth #fifth{
  color: hotpink;
}

[ratnanil]

posted this on stackoverflow: https://stackoverflow.com/questions/69329191/css-selector-parent-class-matches-child-class