0

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

Kitty Craft0
  • 43
  • 7

1 Answers1

2

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>
Unmitigated
  • 76,500
  • 11
  • 62
  • 80
  • I want it to be able to be changed when I select a new item, such that the old one stops being colored and the new one gets colored, such that it requires javascript for the event listener of the selected point changing and updating – Kitty Craft0 Oct 12 '21 at 18:39
  • 3
    @KittyCraft0 So just add and remove a class for highlighting with JavaScript. If you need more detailed help, you should post your code. – Unmitigated Oct 12 '21 at 18:39
  • @KittyCraft0 I've updated my answer to show how to add a class in JavaScript. – Unmitigated Oct 12 '21 at 18:42
  • @KittyCraft0 so use a class.... – epascarello Oct 12 '21 at 18:42
  • @epascarello Nobody answered why you cant just do something along the lines of `document.getElementById("thelistitem").style.marker.color="blue";` or whatever, but I guess I never specified that... – Kitty Craft0 Oct 13 '21 at 13:04