Question

I was just exposed to these, and couldn't find anything else on Google to explain their exact mechanics -- they seem very interesting and potentially useful, however, so here is my CSS:

ul[id*="mainSecMenu"]{
    height:70px;
    width:91.6%;
    padding:0;
    margin:0 auto;
}

li[class="secMenu_link"]{ /*note this used to be class*="secMenu_link", but it prevented CSS cascade from .activeLink */
    display:inline-block;
    height:12px;
    padding:7px;
    background:#f4f4f4;
    border:2px solid #555;
    border-radius:2px;
    cursor:pointer;
}

.activeLink {
    display:inline-block;
    height:12px;
    padding:7px;
    background:#f36459;
    border:2px solid #f36459;
    color:#444;
    border-radius:2px;
}

HTML:

<ul id="mainSecMenu_marketing">
    <li class="secMenu_link">MATERIALS BY PRODUCT</li>
    <li class="secMenu_link activeLink">MATERIALS BY TYPE</li>
    <li class="secMenu_link">TRADESHOW &amp; DEMO TOOLS</li>
    <li class="secMenu_link">BRAND GUIDELINES &amp; LOGOS</li>
    <li class="secMenu_link">MATERIAL ORDERS</li>
</ul>

I was hoping that if I used li[class*="secMenu_link"] , anything beginning with .secMenu_link would be styled with those rules (ex: .secMenu_link_active) would inherit those rules AND any rules unique to .secMenu_link_active

This does not seem to be the case though. What Would li[class*="secMenu_link"] be doing, exactly? And, is there any way to achieve what I mentioned above?

Or to achieve that effect, do I have to do:

CSS

.generic, .generic_typeB {
    /* styles A */
}

.generic_typeB {
    /* styles B */
}

My intent in this example is to have .generic_typeB inherit from .generic and have its own rules, but I thought the syntax I discovered at the beginning of this post, may help me organize things in a different manner.

Thanks much for your time.

No correct solution

OTHER TIPS

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top