Search code examples
cssnestedless

Less nested rules - can i put the cascaded selector before the main selector?

My selector needs to be:

.tooltip.right .tooltip-arrow

So I use the following nested rule:

.tooltip-arrow {
  .tooltip.right {
     left: -(@ttArrowSize - 5);
     margin-top: -@ttArrowSize;
     border-width: @ttArrowSize @ttArrowSize @ttArrowSize 0;
     border-right-color: @ttColor;
  }
}

But after compiling the selector looks like:

.tooltip-arrow .tooltip.right

The main question is if I can indicate LESS to put the "cascaded" selector before the main one. Any workarounds are welcome as well.

Solution

  • You can use the ampersand selector, which refers to the parent selector inside a nested selector.

    Interesting Article

    So this in LESS

    .tooltip-arrow {    
    .tooltip.right & {
            color:red;
    }      
    .tooltip.left & {
            color:blue;
    }
}

    compiles to this in CSS

    .tooltip.right .tooltip-arrow {
  color: red;
}
.tooltip.left .tooltip-arrow {
  color: blue;
}