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

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