Sign in to follow this  
deadimp

[web] CSS: Precedence when element is assigned multiple classes?

Recommended Posts

[Background crap] My brother had pointed Beryl out to me, so I had gotten to browsing their website, found that it looked neat, and wanted to look at how they did. So I got out FireBug, and just started crapping away [not in a literal sense]. [Situation] I came upon one element, and noticed that it had two classes defined, and I saw that it was valid (or seemed so). So naturally, I tried something like this on my site. I have an admin panel that I'm making for the experience of it, and when the users go to a page, it has a little 'tree' which they're able to backtrack sub-topics of the page (nothing complicated or abstract, I had to do it all manually). Per level of sub-topics, I wanted indention, like so:
Media
> Random Section
> > random.jpg
I had been doing it by just using an extra '>', but that just looks odd, so I wanted to do indentions. I created some random classes, named 'indent1', 'indent2' and such since the div's aren't embedded in each other (it would be awkward in PHP to make that possible). For each level, I have a class, '.top' (top bar), and then the indention level. For some reason, '.top' is overriding '.indent[x]' no matter which order I've put it in, whether in the "class" attribute or in the stylesheet. I've cleared my cache, but it doesn't work. Code:
.top {
 ...
 padding: 3px;
}
.indent1 { padding-left: 15px; }
.indent2 { padding-left: 30px; }
...


<div class="top">Media</div>
<div class="top indent1">Random Section</div>
<div class="indent2 top">random.jpg</div>


As if it matters, it doesn't work in IE6 either. If need be, I'll upload an example on Googlepages. [Question] How does CSS determine 'precedence' of classes upon an element when two+ classes are assigned to it? Does the fact that I have these classes embedded inside another count towards anything (they're in the same one)?

Share this post


Link to post
Share on other sites
The order of the attribute does not matter.

style="foo bar" vs style="bar foo"

The above are equivalent. The order in the <style> matters. The later styles override the previous ones:

.foo {
padding: 3px;
}

.bar {
padding-left: 15px;
}



style="foo" will give you paddings of 3px on each side.

style="foo bar" and style="bar foo" will give you a left padding of 15px and other paddings of 3px;

I really suggest that you use unordered lists for this. It's what they are meant for.

Share this post


Link to post
Share on other sites
Your example works for me.

Quote:
How does CSS determine 'precedence' of classes upon an element when two+ classes are assigned to it?
The CSS spec has the details, particularly in the section about cascading order and specificity. The order in the class="..." has no effect - if all else is equal, it will prefer the styles from the last-defined declaration.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this