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

This topic is 3972 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

## 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 {
...
}
.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 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 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 on other sites
I thought I had tried switching the order of the two in the stylesheet, but I'll try this again.
Thanks.