Exclude class under <a> tag from a:hover

Issue

I have selectable boxes (class="selectbox") with their own hover behaviour, so any link text within these boxes should be excluded from the general a:hover effect. I tried to use the :not() CSS pseudo-class as suggested in other answers on SO but can't get it to work.

<!-- Link within box, should not have hover effect -->
<a href="XXX">
  <div class="selectbox">
    <article class="media">
      <div>
        <p>
        Link within box
        </p>
      </div>
    </article>
  </div>
</a>

<!-- General link, should have hover effect -->
<a href="XXX">General link</a>

CSS I have tried:

a:not(.selectbox):hover {
    text-shadow: 1px 0 0 currentColor;
}

a:not(a > .selectbox):hover {
    text-shadow: 1px 0 0 currentColor;
}

Solution

:not wouldn't work here since you wanna know wether it contains some element or not. You could use :has like below but the support accros browsers isn't the best.

a:hover {
    text-shadow: 1px 0 0 currentColor;
}
a:has(.selectbox):hover{
  text-shadow: none;
}

<a href="XXX">
  <div class="selectbox">
    <article class="media">
      <div>
        <p>
        Link within box
        </p>
      </div>
    </article>
  </div>
</a>

<!-- General link, should have hover effect -->
<a href="XXX">General link</a>

Or use a selector with higher specificity for what's within the anchor, like so:

a:hover {
    text-shadow: 1px 0 0 currentColor;
}
a > .selectbox {
    text-shadow: none;
}

<a href="XXX">
  <div class="selectbox">
    <article class="media">
      <div>
        <p>
        Link within box
        </p>
      </div>
    </article>
  </div>
</a>

<!-- General link, should have hover effect -->
<a href="XXX">General link</a>

Answered By - yousoumar