Each of the ten selectors in the css below set the `color` property for the same element: the second <li>. This shows the versatility in CSS selectors and why it's hard sometimes for machines to predict which elements a style may apply to without knowing the current state of HTML

same-element.html

<input type=range min=0 max=100 value=100>
<input type=checkbox>
<input autofocus>

<ul>
  <li>item
  <li id=demo>item
  <li>item
</ul>

<style>

  li + li:not(li+li+li) { color: teal }

  [id=demo] { color: orange }

  li:nth-of-type(2) {color: purple }

  li:first-child + li { color: gold }

  ul > li:nth-child(1) + li { color: green }

  [value="100"] ~ ul li:first-child + li { color: red }

  input:focus ~ ul li:first-child + li { color: blue }

  [type=checkbox]:checked ~ ul li:nth-child(2) { color: lime; }

  li:not(li:first-of-type):not(li:nth-of-type(n+3)) { color: violet }

  @media (min-width: 800px) {
    li:not(li:first-of-type):not(li:nth-of-type(n+3)) { color: olivedrab }
  }

</style>