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;
    }