Question 186032 in CSS Question posted in
Some basic documentation can be found here.

Css – Can I use :not in this case?

<ul class="promocode">
<li>one</li>
<li>two</li>
<li class="three">three</li>
</ul>

Сan I use :not to create a hover effect on the entire list, but hovering over three

didn’t hover over the entire list?

I don’t seem to fully understand how this thing works. And I couldn’t do it

Tags:

3

Answers


  1. 0

    Yes you can use :not for exclude .three li

    li:not(.three):hover{
  color:red;
}
    <ul class="promocode">
  <li>one</li>
  <li>two</li>
  <li class="three">three</li>
</ul>

    You can also use it directly to ul but you will not able to hover single li

    ul:hover > li:not(.three){
  color:red;
}
    <ul class="promocode">
  <li>one</li>
  <li>two</li>
  <li class="three">three</li>
</ul>
    Login or Signup to reply.
  2. 0

    You can use has() to achieve this:

    ul:hover:has(li.three:not(:hover)) {
  background: gray;
}
    <ul class="promocode">
  <li>one</li>
  <li>two</li>
  <li class="three">three</li>
</ul>
    Login or Signup to reply.
  3. 0

    If the requirement is as stated: viz change the background color of the ul when any li except .three is hovered, then this can be done with a pseudo before element.

    This snippet sets the ul to position relative and a before pseudo element on hovering any bar the .three lis is set to have the full height and width of the ul with position absolute.

    This then carries the background color.

    <style>
  ul {
    position: relative;
    display: inline-block;
  }
  
  .promocode>li:not(.three):hover::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: gray;
    top: 0;
    left: 0;
    display: inline-block;
    pointer-events: none;
    z-index: -1;
  }
</style>
<ul class="promocode">
  <li>one</li>
  <li>two</li>
  <li class="three">three</li>
</ul>

    Note: this is not a general purpose selection solution – it is just for the specific requested case of setting a background.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search