Hierarchy in styles

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Rob Nicholson - 26 May 2005 10:32 GMT

I came across the following format of style sheets:

.Label .TextBox .DropDown .Title1 .FormButton .TabHeading
{
font-family: Verdana, Helvetica, sans-serif;
}

.Label
{
font-size: 10pt;
line-height: 22px;
}

I thought this means that .Label ends up with a style including the original
font-family plus the font-size and line-height. This doesn't appear to work
on IE6, i.e. it ignores the font-family and doesn't build a hierarchy. You
have to include the font-family within the second .Label style.

Have I misunderstood the specification somewhere?

Cheers, Rob.

Reply to this Message

Spartanicus - 26 May 2005 11:09 GMT

>.Label .TextBox .DropDown .Title1 .FormButton .TabHeading

Spaces such as used here are descendant selectors:
http://www.w3.org/TR/CSS21/selector.html#descendant-selectors

Insert commas to apply a style to several classes.

Signature

Spartanicus

Reply to this Message

Harlan Messinger - 26 May 2005 14:58 GMT

> I came across the following format of style sheets:
>
[quoted text clipped - 4 lines]
> on IE6, i.e. it ignores the font-family and doesn't build a hierarchy. You
> have to include the font-family within the second .Label style.

Your selector above matches only an element with a class of TabHeading
that is in an element of class FormButton that is in an element of class
Title1 that is in an element of class Dropdown that is in an element of
class TextBox that is in an element of class Label. You want

.Label, .TextBox, .DropDown, .Title1, .FormButton, .TabHeading

and then you'll get the result you were expecting.

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / May 2005

Hierarchy in styles