I have something that selects a line number in a list, and I have line numbers made by using an ordered list. When I have a line number selected, I want the line number indicator for that specific line to change a color. How do I do this?
I know that you can style it in CSS by doing li::marker, but how would I change the individual list item markers in javascript?
https://replit.com/@KittyCraft0/3D-modeling-software-10#ObjSettings/SelPoint.js:67:29
You can add a class to list items you want to highlight.
document.querySelector('ol').children[1].classList.add('highlight');li.highlight::marker {
color: red;
}<ol>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>The :nth-child() pseudo-class can be used if the items are known in advance.
li:nth-child(2)::marker {
color: red;
}<ol>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>