CODEWITHSUNDEEP
htmlcssless
obk
obk

Reputation: 19

LESS li class not working

I'm using this code in my LESS file, the &:hover is working correctly but the .active is not working.

Anyone have an idea how to solve this ?

    li{
      padding: 8% 10%;
      list-style-type: none;
      li.active,
      &:hover{
        background-color: #e33939;
        color: #fff;
      }
      a{
        color: inherit;
        text-decoration: none;
      }
    }

Upvotes: 0

Views: 371

Answers (2)

Ram
Ram

Reputation: 144689

If you want to select li elements that have active class name you should use the & otherwise your selector is compiled as a descendant combinator selector (li li.active) that selects descendant li.active elements of li elements.

li {
      padding: 8% 10%;
      list-style-type: none;
      &.active,
      &:hover{
        background-color: #e33939;
        color: #fff;
      }
      ...
}

This is the compiled CSS:

li {
  padding: 8% 10%;
  list-style-type: none;
}

li.active,
li:hover {
  background-color: #e33939;
  color: #fff;
}

...

Upvotes: 4

Prasad
Prasad

Reputation: 211

Try :

li{
      padding: 8% 10%;
      list-style-type: none;
      &.active,
      &:hover{
        background-color: #e33939;
        color: #fff;
      }
      a{
        color: inherit;
        text-decoration: none;
      }
    }

Upvotes: 0

Related Questions