Target immediate parent in LESS from within nested classes

Question

So I have a bunch of nested classes. I'd like to target the IMMEDIATE parent from deep within the nest. So for example, I have:

.navbar {
   ul {
      li {
         a {
            .ACTIVE & {
              background: red;
            }
        }
      }
   }
}

The above results in:

.ACTIVE .navbar ul li a {
   background: red;
}

But what I am trying to achieve is:

.navbar ul li.ACTIVE a {
   background: red;
}

Is this possible?

I don't think you can do that - http://stackoverflow.com/questions/11519931/less-css-accessing-classes-further-up-the-dom-tree-from-within-a-nested-class?rq=1 — Paulie_D, Jul 12 '16 at 11:00
..or http://stackoverflow.com/questions/14472776/referencing-parent-with-multiple-levels-of-nesting-in-less?rq=1 — Paulie_D, Jul 12 '16 at 11:01

score 0 · Answer 1 · answered Jul 12 '16 at 11:02

0

Do get to that path using LESS, you'd do something like

.navbar {
   & > ul {
      & > li {
         & > a {
            &.active {
              background: red;
            }
        }
      }
   }
}

This will result the following selector:

.navbar > ul > li > a.active { background: red; }

EDIT:

Sorry, totally missed the most important part.... So, to get what you're trying to achieve :

.navbar {
    ul {
       li {
         &.ACTIVE{
           a {
              background: red;
           }
         }
      }
   }
}

answered Jul 12 '16 at 11:02

Alon Eitan

Thanks, but i need to move up from within the a tag. – user2726041 Jul 12 '16 at 11:08
@user2726041 I have edited my answer multiple time. Please make sure I tried my last attempt. Because I wasn't focused. Sorry – Alon Eitan Jul 12 '16 at 11:09
Thanks Alon, yes I'm seeing the latest answer. But I'm looking to target the LI from within the A. – user2726041 Jul 12 '16 at 11:14

1 Answers1