specificity
in [CSS]
|
From: Jeff Thies on 21 Jul 2010 08:18 My goal is fewer templates and just one stylesheet per site. To get there I usually add an id in the body tag. <body id="body_id" ... Then if I want to change the side_nav it is just: #body_id #side_nav{... That works well but I find that sometimes I'll need a small styling bit on just one page, what I'd like to do is add a class (I can do that in the CMS) so I can write a new set of rules with a higher specifity. <body id="body_id" class="new_class" ... How do I write the rule so it has a higher "score", just doing this: ..new_class #side_nav is lower than #body_id #side_nav and adding !important has it's limits and body.new_class #side_nav does not work. I'm thinking there is an easy way to do this that has just escaped me, but then again I have never completely read the CSS specs (and I don't think I ever could, eyes glazing just thinking of it!). Jeff
From: Chris F.A. Johnson on 21 Jul 2010 08:22 On 2010-07-21, Jeff Thies wrote: > My goal is fewer templates and just one stylesheet per site. > > To get there I usually add an id in the body tag. > ><body id="body_id" ... > > Then if I want to change the side_nav it is just: > > #body_id #side_nav{... > > That works well but I find that sometimes I'll need a small styling > bit on just one page, what I'd like to do is add a class (I can do that > in the CMS) so I can write a new set of rules with a higher specifity. > ><body id="body_id" class="new_class" ... > > How do I write the rule so it has a higher "score", just doing this: > > .new_class #side_nav is lower than #body_id #side_nav > > and adding !important has it's limits and body.new_class #side_nav does > not work. > > I'm thinking there is an easy way to do this that has just escaped me, > but then again I have never completely read the CSS specs (and I don't > think I ever could, eyes glazing just thinking of it!). <http://www.w3.org/TR/css3-selectors/#specificity> -- Chris F.A. Johnson <http://torontowebdesign.cfaj.ca>
From: Chris F.A. Johnson on 21 Jul 2010 08:26 On 2010-07-21, Jeff Thies wrote: > My goal is fewer templates and just one stylesheet per site. > > To get there I usually add an id in the body tag. > ><body id="body_id" ... > > Then if I want to change the side_nav it is just: > > #body_id #side_nav{... > > That works well but I find that sometimes I'll need a small styling > bit on just one page, what I'd like to do is add a class (I can do that > in the CMS) so I can write a new set of rules with a higher specifity. > ><body id="body_id" class="new_class" ... > > How do I write the rule so it has a higher "score", just doing this: > > .new_class #side_nav is lower than #body_id #side_nav > > and adding !important has it's limits and body.new_class #side_nav does > not work. > > I'm thinking there is an easy way to do this that has just escaped me, > but then again I have never completely read the CSS specs (and I don't > think I ever could, eyes glazing just thinking of it!). And: <http://www.w3.org/TR/CSS2/cascade.html#specificity> -- Chris F.A. Johnson <http://torontowebdesign.cfaj.ca>
From: dorayme on 21 Jul 2010 08:38 In article <i26oi1$7pl$1(a)news.albasani.net>, Jeff Thies <jeff_thies(a)att.net> wrote: > My goal is fewer templates and just one stylesheet per site. > > To get there I usually add an id in the body tag. > > <body id="body_id" ... > > Then if I want to change the side_nav it is just: > > #body_id #side_nav{... > > That works well but I find that sometimes I'll need a small styling > bit on just one page, what I'd like to do is add a class (I can do that > in the CMS) so I can write a new set of rules with a higher specifity. > > <body id="body_id" class="new_class" ... > > How do I write the rule so it has a higher "score", just doing this: > > .new_class #side_nav is lower than #body_id #side_nav > > and adding !important has it's limits and body.new_class #side_nav does > not work. > > I'm thinking there is an easy way to do this that has just escaped me, > but then again I have never completely read the CSS specs (and I don't > think I ever could, eyes glazing just thinking of it!). > > Jeff If you want to change a little something (like say the colour of the font) in a particular element on one page, consider a little addition in the head. <style type="text/css" media="all"> #side_nav {color: red; background: black;} </style> Or even, if it *just* one little thing or so, an inline style -- dorayme
From: Jeff Thies on 21 Jul 2010 10:31
Chris F.A. Johnson wrote: > On 2010-07-21, Jeff Thies wrote: >> My goal is fewer templates and just one stylesheet per site. >> >> To get there I usually add an id in the body tag. >> >> <body id="body_id" ... >> >> Then if I want to change the side_nav it is just: >> >> #body_id #side_nav{... >> >> That works well but I find that sometimes I'll need a small styling >> bit on just one page, what I'd like to do is add a class (I can do that >> in the CMS) so I can write a new set of rules with a higher specifity. >> >> <body id="body_id" class="new_class" ... >> >> How do I write the rule so it has a higher "score", just doing this: >> >> .new_class #side_nav is lower than #body_id #side_nav >> >> and adding !important has it's limits and body.new_class #side_nav does >> not work. >> >> I'm thinking there is an easy way to do this that has just escaped me, >> but then again I have never completely read the CSS specs (and I don't >> think I ever could, eyes glazing just thinking of it!). > > <http://www.w3.org/TR/css3-selectors/#specificity> Ow! I see no help there. What does this mean?: Note: Repeated occurrances of the same simple selector are allowed and do increase specificity. Jeff > > |