[css-d] parenting issues
Hi, I have added page class suffix to some pages on my website giving the body id=page class=corporate. I want to rewrite the CSS for the h1 in only the corporate pages. However my body.corporate gets overwritten by #page styles. What order can I layout these IDs, classes so that I only style h1 for corporate body? Thanks, CB __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] parenting issues
Am 23.04.2010 12:18, schrieb Chris Blake: Hi, I have added page class suffix to some pages on my website giving the body id=page class=corporate. I want to rewrite the CSS for the h1 in only the corporate pages. However my body.corporate gets overwritten by #page styles. What order can I layout these IDs, classes so that I only style h1 for corporate body? Thanks, CB __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ Maybe this has some good ressources for understanding css specificity: http://www.d.umn.edu/itss/support/Training/Online/webdesign/css.html#cascade A selector like body#page has a higher specificity than body.corporate. But body#page.corporate should have an even higher specificity. Best regards Christian Kirchhoff *Editura GmbH Co. KG* Tempelhofer Damm 2 · 12101 Berlin www.editura.de AG Berlin-Charlottenburg · HRA 43189 B · USt.Id. DE217180548 Geschäftsführer: Ralf Szymanski __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] parenting issues
-Mensagem Original-
De: Chris Blake
Hi,
I have added page class suffix to some pages on my website giving the
body id=page class=corporate.
I want to rewrite the CSS for the h1 in only the corporate pages.
However my body.corporate gets overwritten by #page styles. What order
can I layout these IDs, classes so that I only style h1 for corporate
body?
---
Hi all,
This happens due the classic *specificity* for CSS selectors.
body#page h1 is more specific than body.corporate h1 and override
rules for this selector.
There are two solutions:
body.corporate #somediv h1 is more specific than body#page h1
or you use de !important diretive like so:
body.corporate h1 {propertie:value !important;}
Further read:
http://www.w3.org/TR/CSS2/cascade.html#specificity
http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
Regards
Maurício
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] parenting issues
The specificity was already discussed. This aside, I think that #page was chosen as too specific. You may introduce a second class body class=about corporate id=p003 would be the third page of the about section in the coporate pages part of your site. I'd use the id just for one unique page. Otherwise, it is a class. HTH Ingo __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] parenting issues
Hi, body#page.corporate That has worked! Thank you so much! Cheers, CB On 23/04/2010, at 7:27 PM, Christian Kirchhoff wrote: Am 23.04.2010 12:18, schrieb Chris Blake: Hi, I have added page class suffix to some pages on my website giving the body id=page class=corporate. I want to rewrite the CSS for the h1 in only the corporate pages. However my body.corporate gets overwritten by #page styles. What order can I layout these IDs, classes so that I only style h1 for corporate body? Thanks, CB __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ Maybe this has some good ressources for understanding css specificity: http://www.d.umn.edu/itss/support/Training/Online/webdesign/css.html#cascade A selector like body#page has a higher specificity than body.corporate. But body#page.corporate should have an even higher specificity. Best regards Christian Kirchhoff *Editura GmbH Co. KG* Tempelhofer Damm 2 · 12101 Berlin www.editura.de AG Berlin-Charlottenburg · HRA 43189 B · USt.Id. DE217180548 Geschäftsführer: Ralf Szymanski __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
