Forum Moderators: not2easy
any help would be most appreciated.
I thought I had a good understanding of CSS inheritance but the trouble I've had with this little issue it would appear not!
Consider the following simple styles:
.outer
{
background-color: blue;
width: 400px;
height: 400px
}
.outer div
{
background-color: green;
width: 400px;
height: 400px
}
.inner
{
background-color: red;
width: 200px;
height: 200px
}
Now the mark-up:
<div id="out" class="outer">
<div id="in" class="inner"></div>
</div>
I would have expected the ".inner" style to take precedence over the ".outer div" instruction but it doesn't appear that way?
Could anyone explain this one to me?
Many thanks in advance.
#in
#out
<div id="in">
<div id="out>
>.outer
That's defining class="outer"
>>.outer div
Are you trying to define a div or a class with that?
#outer {...} for <div id="outer">
#outer a (...) for hyperlinks within <div id="outer">
a#outer (...) ditto
<div id="outer">
<a href=<"...">
</div>
>>.outer div
Check the W3 specs on classes and divs, and run the stylesheet through their validator.
[edited by: Marcia at 5:55 pm (utc) on Nov. 19, 2007]
I would have expected the ".inner" style to take precedence over the ".outer div" instruction but it doesn't appear that way?
Specificity ;) - See: 6.4.3 Calculating a selector's specificity [w3.org]
both
.outer div.innerhowever
.outer divin *very* simple terms .outer div uses 2 parts,
1 x classname (.outer) & 1 x element name (div) whereas .inner just uses one part, 1 x classname (.inner)
The longer story is explained on the above link.. but the relevant part..
- a= count 1 if the declaration is from is a 'style' attribute rather than a rule with a selector, 0 otherwise (= a)
(In HTML, values of an element's "style" attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.)- b= count the number of ID attributes in the selector (= b)
- c= count the number of other attributes and pseudo-classes in the selector (= c)
- d= count the number of element names and pseudo-elements in the selector (= d)
written and read as a,b,c,d
and your example selectors translate as:
.inner = 0,0,1,0
c = 1 x attribute that is not an ID
.outer div = 0,0,1,1
c = 1 x attribute that is not an ID
d = 1 x element
while the reading of these specifics is not quite as simple as base 10, i.e. reading them as 10 and 11, the principle is the same a beats b beats c beats d -
Above two are both the same in strength as far as (c) goes, but the extra (d) gives the latter the upper hand, and the trump card :)
hth
Suzy
Especially when using "shorthand" for styling fonts to cut down on file sizes, it's playing tricks with inheritance, which I vaguely remember seeing you post something about a while back. I've had a few moments when I'm ready to go back to HTML 3.2 with font tags.
How does using shorthand affect specificity and inheritance, especially with nested page sections?
[edited by: Marcia at 7:03 pm (utc) on Nov. 19, 2007]
I think the best thing to do when starting a page OR remodelling is to start at the outside and work in, (think onion skins)
Start with an ID, an ID on the body element is a great place to start - and then use whatever elements are there on the inside specifically, and only add class names if all else fails or something really is an exception to the rules
Most people tend to start on the inside, with the exceptions like fancy menu links and colored highlights, and work outwards but IMHO this tends to lead to classitis and divitits (overuse of both) ;)
It's almost easier to think about this when using tables;
Give the outermost table an identity, #ID, as a starting point to enable you identify the whole page .. e.g. wrapper then give each separate "section" of the table an identity {#ID} too e.g. tr#header, td#nav, td#content, tr#footer,
You can see that on some of them I'm putting the ID on the rows tr's and others I'm using the cells, td's. That's the "outside working in" theory, using rows and cells that are already there but leaving room to get more specific if required and I still haven't added a class name yet ;)!
You shouldn't have all that much need for extraneous classes as the elements within these parts of the table can be targeted separately using, for example #nav tr or #nav td, or #nav td ul
- I know it's not quite like this but you'll see that you can get quite specific using the outer layer and existing elements
Especially when using "shorthand" for styling fonts, it's playing tricks with inheritance.
Using shorthand for any of the properties, font, background, borders etc.. is a little risky because as soon as you do use shorthand you *could* be implicitly overriding previous declarations without realising it, Each shorthand property has default values and these defaults will overrule a previous explicit setting if the Cascade or Selector Specificity tells it to! :o
I find it best to use shorthand earlier, not earlier in the cascade but earlier on the selector specificity ladder and then use longer hand for later rules.
basic example
body {font: 14px/1.5 arial, sans-serif;}
this sets the font-weight, font-variant, font-size, line height and font family for the whole document
if you than later wanted to adjust the font-weight to bold (it's being implicitly set to normal by your first rule) or a line-height setting for a particular div just use
line-heightfont-weightbody {font: bold 14px/1.2 arial, sans-serif;}
this then leaves you with the possibility of more elements inheriting the new values than you might want, overall for pinpoint focus - longer hand properties are best.
don't know if that's any clearer than previously written [webmasterworld.com] but ask away if it's muddy!
Regards.
How does using shorthand affect specificity and inheritance, especially with nested page sections?
sorry, only saw this part after..
It's not necessarily an issue, rather it's something to be aware of and something that can be used to advantage.
The shorthand properties in themself do not affect inheritance or the specificity of selectors. Any potential 'inheritance issues' will occur whether or not shorthand is used.
Sorry Marcia, I tried to do some samples to explain this and found I couldn't without at least 50 pages ;) - I think the issues are separate..
perhaps if you clarify what you mean.. is it something like this..?
div {
font: bold 120%/1.2 georgia, serif;
}</style>
</head>
<body>
<div id="wrapper">wrapper text
<div id="content">content text
<div id="nav">nav text
</div>
</div>
</div>
As in the font properties just keep on inheriting, sorry for being dense I think I've got brain freeze :)
