CODEWITHSUNDEEP
css
Shackrock
Shackrock

Reputation: 4701

CSS hierarchy - div within div

I have some CSS that I've pieced together from a few sources, but my question is quite basic.

In this jsfiddle: http://jsfiddle.net/Ekbsb/1/ why does the outer div's UL CSS take precedence over the "downstream" div's UL rules?

To be specific:

#bodytopPan ul{margin:0px 0px 0px 25px; padding:0px;}

is overwriting this code:

.ILdropdown  ul{
    left: 0;
    margin: 5px 0;
}

Even though .ILdropdown ul is placed "lower" in the HTML. Isn't this the opposite of how it should be working??

My goal is to replace the body ul code with something for this specific instance.

Thanks.

Upvotes: 2

Views: 171

Answers (3)

albert
albert

Reputation: 8153

bodytopPan is an id, which is more specific than .ILdropdown, which is a class. the higher the specificity, the more emphasis placed on the declaration.

Upvotes: 2

Cypress Frankenfeld
Cypress Frankenfeld

Reputation: 2557

CSS ids (#) take precedence over classes (.)

Re-write it as follows:

#bodytopPan ul{margin:0px 0px 0px 25px; padding:0px;}

#bodytopPan .ILdropdown  ul{
    left: 0;
    margin: 5px 0;
}

Upvotes: 3

Andy
Andy

Reputation: 14575

It's not about the order in the HTML, its about the order in the CSS.

Edit: If you want to be specific (i.e only affect the main, first ul in "body" and no others, you can do body > ul which will only target unordered lists of which are direct children of the body. Obviously you probably won't have this case, more like body > div > div > ul but it lets you be more specific which UL you want to target (if it has no class)

Upvotes: 0

Related Questions