14 replies [Last post]
frikus
Offline
newbie
Last seen: 15 years 48 weeks ago
Joined: 2006-10-25
Posts: 3
Points: 0

hi all, why don't margin and padding properties of the ".item p" override the properties of the "#content p" in the following code?

#content { padding: 5px; }

#content p {
margin: 15px;
padding: 15px;
}

.item {
padding: 10px;
}

.item p {
margin: 30px;
padding: 30px;
}

Lorem ipsum

Lorem ipsum

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 1 week ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Please read up on ids, class

Please read up on ids, class and specificity, basically IDs beat classes.

frikus
Offline
newbie
Last seen: 15 years 48 weeks ago
Joined: 2006-10-25
Posts: 3
Points: 0

thanks

Thanks, I suspected this kind of behaviour.
Is there any way for class properties to override id properties?
I just read a book called "Head First HTML with CSS & XHTML", there is no word about this. What other books can you recommend?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Do not rely on books, all

Do not rely on books, all the knowledge is on the web and please check resources such as the 'How To' section, we've already put some time and effort in to trying to help people with some extended posts.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 1 week ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Hehe Hugo. I put exactly

Hehe Hugo. I put exactly that in the first draft of my post, then I checked the How To section. The thread on classes and ids only devotes one line to this.

Quote:
Warning - IDs have a higher specificity than classes.

And if you don't know what specificity is, you've got no chance.

Frikus, no amount of classes can beat one id. The solutions are to:
- make "content" a class
- give "!important" to .item p styles (won't work in IE6)
- add #content to .item p style selector

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Oops, should have looked

Oops, should have looked first. Sorry that post needs expanding on one or two points

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

frikus
Offline
newbie
Last seen: 15 years 48 weeks ago
Joined: 2006-10-25
Posts: 3
Points: 0

Chris..S wrote: - add

Chris..S wrote:

- add #content to .item p style selector

I can write something like this?

#content .item p {

}

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Yes you can. What is

Yes you can. What is happening is that you are now being more specific as to which selectors/element your properties are to effect or act on.

Using descendant selector styling, that is targeting rules to elements based on an element within a nesting or hierarchy of preceding elements, can tend not to be specific enough as your example demonstrates. #content p as you are aware means ANY p element that has an ancestor named #content, that could mean a p that was nested to a deep level such as #content #doodah .blah p {} .item p and #content p refer to paragraphs referenced within the nested hierarchy .item is nested in #content. p is in .item but it is also in #content so there is a conflict which rules should be applied? as an ID has a greater weight(more importance) than a class the ID rules will override any of a lower weight(the class selector)(selectors have a numbering system to determine which rules should be applied, explained Here

Adding in #content to the .item p selectors now increases the weight of the rules, you are being more specific in applying those rules and they now outweigh the more general #content p{}.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

briski
briski's picture
Offline
Elder
London
Last seen: 10 years 15 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

specificity wars

There is a pretty good explination here

http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

the fact that it's star wars based is just an added bonus/shocking detration depending on your point of view.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 50 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

That's cool except that he's

That's cool except that he's got his rankings back to front. You can have as many classes and IDs as you want but there's only a limited number of Sith lords whereas you can have as many stormtroopers as you like but there's only a finite number of elements. Wink

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

briski
briski's picture
Offline
Elder
London
Last seen: 10 years 15 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

Not that you taking this too

Not that you taking this too seriously or anything but I think that the levels are picked for their strength not how many of them exist in the empire Wink

Also, your assertion is not right! You can have as many elements as you want!

I can theoretically nest an infinite number of div tags (stormstoopers) inside one another then target it with an infinitely long list of div selectors in the css and yet it will still be trumped by a single sithlord ID selector.

div div div div div div div div … infinity … div
{
color: goldenrod;
}

Will lose a fight with

#hoopla
{
color: indianred;
}

Assuming that the last div tad has an ID of hoopla clearly...

[edited to lessen the chance of being picked up on pedantic points whilst being a pedant ;)]

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Have you lot been out on the

Have you lot been out on the lash after work or somit?

At risk of seeming humourless I think that site has a terrible garbled confused method of explaining things (almost as bad as mine earlier) I think the W3C explanation is quite clear for once and doesn't really need to changed causing confusion to reign in that galaxy far far away.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 50 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

briski wrote:You can have as

briski wrote:
You can have as many elements as you want!

Yes I can guess you can have as many element selectors in your CSS like that but I meant there aren't as many elements themselves, ie, you've only got div, p, ul, li etc.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

briski
briski's picture
Offline
Elder
London
Last seen: 10 years 15 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

Hugo wrote:Have you lot been

Hugo wrote:
Have you lot been out on the lash after work or somit?

Sadly not no.

Whilst I agree that the W3C thing is fine, clearly it it not that great for everyone as this issue trips lots of people up at the start. It's always helpful to have a number of different explanations so that there is less chance of misinterpreting one.

If the Sith lords are too much there is always the sensible version at

http://www.molly.com/2005/10/06/css2-and-css21-specificity-clarified/

although it's pretty much the same.

Also whoever put them two fighting urchins in my previous post, thanks, now I look even more the freak Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

briski wrote: Also whoever

briski wrote:

Also whoever put them two fighting urchins in my previous post, thanks, now I look even more the freak Smile

As if you needed any help Daft visor Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me