Search code examples
csslessmixins

LESS selectors: how to apply styling only for one of the elements from inside mixin?

I have a code that I can't change:

item.left,
item.centre,
item.right{
.MIXIN();
}

.MIXIN(){
width: 100px;
}

I need to apply width only to .right element. I can only change contents of MIXIN(). I was thinking of using &but it will result either in .right item.right or item.right .right which is not what I want. Is there a way to apply styling only for .right element using contents of MIXIN()?

Solution

  • You can use the negation CSS pseudo-class :not().

    item.left,
item.centre,
item.right{
  width: 20px; 

  &:not(.left):not(.centre) {
    width: 100px;
  }
}

    Fiddle: https://jsfiddle.net/e0nd7pk4