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.
You can use the ampersand selector, which refers to the parent selector inside a nested selector.
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;
}