Exclude class under <a> tag from a:hover-CodePudding

I have selectable boxes () 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 >
    <article >
      <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;
}

CodePudding user response：

: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 >
    <article >
      <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 >
    <article >
      <div>
        <p>
        Link within box
        </p>
      </div>
    </article>
  </div>
</a>

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

CodePudding user response：

i tried to use :not()

     a {
            display: block;
            color: green;
        }
        a:not(.child):hover {
            font-size: 1.5em;
        }

 <a href="XXX" >General link
        <a  href="XXX">
            <div >
                <article >
                    <div>
                        <p>
                            Link within box
                        </p>
                    </div>
                </article>
            </div>
        </a>
    </a>