How do I apply the same styling to all immediate children classes?

Question

In less I have the following:

.some-class{
    > li{
        a{

            color: white; 
            background: @fti-lightgrey;
            border-radius: 0px;
            padding: 1px 15px;

            // a color for the partcular tab that is chosen. (the color for each tab can be set inside mura)
            &.orange{ 
                &:hover{ background: @fti-orange; }
                &:hover{ color: white; }
            }
            &.black { 
                &:hover{ background: black; }
                &:hover{ color: white; }
            }
            &.topaz{ 
                &:hover{ background: @fti-topaz; }
                &:hover{ color: white; }
            }

        }
    }
}

How do I avoid writing &:hover{ color: white; } multiple times?
Is there a way to apply this line to all of the immediate class descendants somewhere inside the a tag?

Answer 1

It depends on the desired result.

Do you want: 1) White hover color by default, regardless of whether it also has the one of the .orange, .black, or .topaz classes?

.some-class{
> li{
    a{

        color: white; 
        background: @fti-lightgrey;
        border-radius: 0px;
        padding: 1px 15px;

        // a color for the partcular tab that is chosen. (the color for each tab can be set inside mura)
        &.orange{ 
            &:hover{ background: @fti-orange; }
        }
        &.black { 
            &:hover{ background: black; }
        }
        &.topaz{ 
            &:hover{ background: @fti-topaz; }
        }

    }
    a:hover{ color: white; }
}

}

2) Or do you only want it to be white on hover if it also has one of .orange, .black, .topaz classes?

.some-class{
> li{
    a{

        color: white; 
        background: @fti-lightgrey;
        border-radius: 0px;
        padding: 1px 15px;

        // a color for the partcular tab that is chosen. (the color for each tab can be set inside mura)
        &.orange{ 
            &:hover{ background: @fti-orange; }
        }
        &.black { 
            &:hover{ background: black; }
        }
        &.topaz{ 
            &:hover{ background: @fti-topaz; }
        }

    }
    a:hover {
        &.orange, &.black, &.topaz{ 
            color: white; 
        }
    }
}

}

Answer 2

You could do

a:hover {
    &.orange, 
    &.black,
    &.topaz { color: white; }
}

then define the background individually. This is assuming the hover for your anchor is different colour than white by default and you want the coloured classes to be white(not in a human race way!).

or use the same style as you have

a {
    &.orange, &.black, &.topaz {
        &:hover { color: white; }
    }
}

if you have a common class for the colours then you could always target that common class

Answer 3

In this case I would recommend to simply remove &:hover { color: white; } rules, as long as you have it set on a tag already and there is no something like a:hover rules which might override this.

In case if you have some a:hover rule with different color, simply add &:hover { color: white } right inside of a block.

.some-class{
    > li{
        a{
            color: white; 
            background: @fti-lightgrey;
            border-radius: 0px;
            padding: 1px 15px;

            // a color for the partcular tab that is chosen. (the color for each tab can be set inside mura)
            &.orange{ 
                &:hover{ background: @fti-orange; }
            }
            &.black { 
                &:hover{ background: black; }
            }
            &.topaz{ 
                &:hover{ background: @fti-topaz; }
            }
        }
    }
}