CSS select sibling following another

Find element by class then get to next siblings using +

by Ben Clayton

HTML

<ul id="navigationlist">
  <li>One</li>
  <li>Two</li>
  <li class="nice">Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>

</ul>

<br>
<br>


useful link:  <a target="_blank" href="https://stackoverflow.com/questions/35226766/css-nth-child-from-element-with-class">Stack Overflow</a>

CSS

body {
  background: white;
  padding: 20px;
  font-family: Helvetica;
}


.nice {
  color: red;
}

li.nice + li {
  background-color: yellow;
  
}

li.nice + li + li {
  background-color: pink;  
}

/* confuse people with next item highlight */
li:hover + li {
  background-color: lightblue;
}