Try this:
Code: Select all
.menuitem[data-focused], .menuitem[data-selected] {
background-color: @accentNavy;
& .menutext {
color: @black;
fill: @black;
}
}
The "& .menutext" bit is something unique to LESS. When it compiles to CSS, it becomes this:
Code: Select all
.menuitem[data-focused], .menuitem[data-selected] {
background-color: @accentNavy;
}
.menuitem[data-focused] .menutext, .menuitem[data-selected] .menutext {
color: @black;
fill: @black;
}
Note the difference between the [xyz] syntax and the :xyz syntax.
- [selector] is used for specific HTML attributes (note the
<div class="menuitem" data-focused="1">: If it's something with an equals sign that you can see inside the HTML, you use [square brackets] to select them, like
.menuitem[data-focused])
- :selector is used for "pseudo classes". This is what you need to use for hover. When an element is hovered, it gains the "hover" pseudo class and you can select it via something like
.menuitem:hover
In this case, because MM assigns the custom data-focused and data-selected attributes, you don't need to worry about :hover.