Using li[class*="secMenu_link"]
in the CSS you provided does work exactly how CSS should.
CSS determines which elements receive which styles based on a system of specificity - that is, the more specific a selector the more likely it will take precedence.
Basically what is happening is that the rules in your .activeLink
selector are applying, but are being overridden by the rules applied in li[class*="secMenu_link"]
because it is the more specific selector.
You have two options here:
Change your selector to be more specific (working example)
li[class*="secMenu_link"].activeLink {
background:#f36459;
border:2px solid #f36459;
color:#444;
}
Or add an !important
flag to the overridden rules in .activeLink
(working example)
.activeLink {
background:#f36459 !important;
border:2px solid #f36459 !important;
color:#444 !important;
}
For more information on specificity, have a look at this link.