JSFiddle - React, Tailwind, and code Playground

by Hans PUFAL

HTML

<p>Click on a list item to highlight it in red, in Chrome you can click on the text or the number/bullet
</p>

<ul>
    <li>Item a</li>
    <li>Item b</li>
    <li>Item c</li>
</ul>

<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>

CSS

li {cursor: pointer; }

li.selected { color: red; }

JavaScript

[].slice.call (document.querySelectorAll ('ol, ul')).forEach (function (list) {
    for (var s, el = list.firstElementChild; el; el = el.nextElementSibling)
      el.innerHTML = '<span>' + el.innerHTML + '</span>';

    list.addEventListener ('click', function (ev) {
        if (ev.target.tagName !== 'SPAN')
          for (var el = this.firstElementChild; el; el = el.nextElementSibling)
              el.className = el === ev.target ? 'selected' : '';
    }, false);    
});