Question

It doesn’t seem to be working. The styles of nth-child(2) need to be differnt on hover if nth-child(3) is .active

CSS:

li:nth-child(3).active ~ li:nth-child(2):hover

HTML:

 <ul>
    <li>
      <h1 id="logo">Logo</h1>
    </li>

    <li>
      <a href="#">Products</a>
    </li>

    <li class="active">
      <a href="#">Parts</a>
    </li>

    <li>
      <a href="#">Resources</a>
    </li>
  </ul>

Answer 1

If you need to select li:nth-child(2) only when li:nth-child(3) is .active, it’s not possible, because the sibling combinators + and ~ don’t look backward.

You have to either modify your HTML to somehow accommodate these conditions, or use DOM traversal (much easier).