CSS specificity, parent container overrules sub container

Question

I'm strugling a bit with some custom 960.gs classes that I'm using. Problem occurs when I'm using a sub-container, and the sub-container's column simply inherits the width from the main-container's column rules.

In my opinion the inner cells (foo + bar) should be green. Meaning they should get the rules of .container-6 .grid-3 instead of .container-8 .grid-3

I'm aware of the !important option in CSS, but I would like to investigate other options first, because that would be a problem if the situation was the other way around.

HTML

<div class="container-8">
    <div class="grid-3">
        <div class="container-6">
            <div class="grid-3 alpha">foo</div>
            <div class="grid-3 omega">bar</div>
        </div>
    </div>
    <div class="grid-5">test
    </div>
</div>

CSS

body {
  min-width: 990px;
}

div {
    padding: 5px 0;
}

.container-6 {
    margin-left: auto;
    margin-right: auto;
    border: 1px solid yellow;
    width: 684px;
}
.container-6 .grid-3 {
    width:312px;
    border: 1px solid green;
}
.container-8 {
    margin-left: auto;
    margin-right: auto;
    width: 960px;
    border: 1px solid silver;    
}
.container-8 .grid-3 {
    width:340px;
    border: 1px solid blue;    
}
.container-8 .grid-5 {
    width:580px;
    border: 1px solid red;    
}

.alpha {
    margin-left: 0 !important;
}

.omega {
    margin-right: 0 !important;
}

.grid-1,
.grid-2,
.grid-3,
.grid-4,
.grid-5,
.grid-6,
.grid-7,
.grid-8 {
    display:inline;
    float: left;
    position: relative;
}

I have made this fiddle to illustrate my problem. I have taken out the non-related 960.gs rules.

Fiddle

In my opinion the inner cells (foo + bar) should be green. Meaning they should get the rules of .container-6 .grid-3 instead of .container-8 .grid-3

Faust · Accepted Answer · 2014-03-05T16:34:37.060

If you want a style that's applied in the context of the inner container to always trump when it's nested inside any other container, you could write it like this:

 [class*="container-"] .container-6 .grid-3{
     border: 1px solid green;
 }

The part in square brackets is an attribute selector. The asterisk indicates a wild-card, so this part matches any element that has the sub-string container- anywhere in its class attribute.

So in your case, since container-8 satisfies the condition for the first part of the selector, this rule will apply and have a higher specificity. And it will work the same way if you nest your .container-6 inside of any 960.gs container, trumping any style rule declared with 2-class specificity.

Caveat: IE-6 and lower doesn't support attribute selectors.

You sir.. is awesome! I have added this [fiddle](http://jsfiddle.net/uNkj3/) which shows how the rules apply both ways, with container-6 nested in container-8 and vice versa. I haven't implemented it into my application yet, but I'm pretty sure it will stick! — Phliplip, Mar 05 '14 at 21:45

score 1 · Answer 2 · answered Feb 12 '14 at 15:45

1

Both of these rules have 2 classes, so they are tied when it comes to specificity. In that case, the latest rule in the css file gets applied. See here for further explanation.

To change it to green, you could swap .container-6 .grid-3 and .container-8 .grid-3 in the CSS file

DEMO

answered Feb 12 '14 at 15:45

Sionnach733

4,686
4
36
51

You're solution is fit for my specific case, where the case of having container-8 inside container-6 will probably never happen. Thus i have implemented that in my application. Still looking for a more universal solution. – Phliplip Feb 12 '14 at 16:05
ok, you would probably have to add some id's if you want to work around this. an id will always trump a class when it comes to css-specificity. – Sionnach733 Feb 12 '14 at 16:09

CSS specificity, parent container overrules sub container

2 Answers2