Change first child default selected color back to unfocused color

Question

I'm trying to create a simple selection menu with css.

I want it to be like so:

upon entering page, there are list-items. The first child of the list item has a default color of yellow (selected color) while it's siblings have a color of blue (unselected colors) . I want it to where when the user clicks on the 2nd or 3rd or 4th etc.. the first child that was yellow goes back to unselected blue while the other selected list item that was selected gets changed to yellow.

I got it to where it focuses on the list colors to change color as well as the first child to change to default yellow. However, when I change to select a list item, the first-child stays yellow while the next list item that I select goes to yellow.

Here is my code I'm using Sass.

 .col-md-4 { .trackContainer { color: $pColor; .fas { float: right; } .trackName { cursor: pointer; &:nth-child(odd) { background: #201f1d; border-bottom: 1px solid #fff; &:hover { background: #1d1c1a; } } &:nth-child(even) { background: #201b1d; border-bottom: 1px solid #fff; &:hover { background: #161314; } } &:first-child { color: $signalYellow; } } ol { li { @include pStyle(); padding: 20px; line-height: inherit; outline: 0; &:hover { color: $hoverColor; } &:focus { color: $signalYellow; } } } } }

 <div className="trackContainer"> <ol> { this.state.trackData.map((rows, index) => ( <div className="trackName data-tip-right" data-tip={"View " + rows.trackName} key={rows.trackName + "-" + rows.track_music_id} onClick={e => this.showLyrics(index, rows.trackLyrics)}> <li tabIndex={index}> {index + 1 + ". " + rows.trackName} <i className="fas fa-arrow-right" /> </li> </div> )) } </ol> </div>

Answer 1

Can't you just give the specific element an selected class and remove the class of the previous selected?

<ol>
 <li onmouseover="selectItem(this)">
     123
 </li >
 <li onmouseover="selectItem(this)">
     1234
 </li >
</ol>

<script>
   function selectItem(item) {
    $('.selectedItem').attr('class', '');
    $(item).attr('class', 'selectedItem');
   }
</script>

.selectedItem {
  color: yellow;
}