Question

I have the following HTML:

<ul>
   <li>
      <span class="toggle"></span>
      <a class="folder">
         <span>Background</span>
      </a>
      <ul>
         <li>
            <a data-href="/C">
                <span>History</span>
            </a>
         </li>
      </ul>
   </li>
</ul>

I am using the following CSS to make the cursor into a pointer:

ul li span {
    cursor: pointer;
}

Is there a way I can modify this so that it does NOT change into a pointer if the <span> is inside an <a> that has a class of folder?

Answer 1

You should be able to use :not() here…

ul li a:not(.folder) span {
    cursor: pointer;
}

Since you also have <span> elements occurring inside <li> but outside <a>, you will need to modify the selector a bit…

ul li > span, ul li > a:not(.folder) > span {
    cursor: pointer;
}

Alternatively (or if you need to support browsers that don’t understand :not()), just override it:

ul li span {
    cursor: pointer;
}

ul li a.folder span {
    cursor: auto;
}