-----Original Message----- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of pixeldiva Sent: Friday, April 01, 2005 10:16 AM To: [email protected] Subject: Re: [WSG] Multiple classes applied to one element
On Apr 1, 2005 4:04 PM, Trusz, Andrew <[EMAIL PROTECTED]> wrote: > Actually the example works just fine in IE6. Not strictly. If you look, you'll notice that the third sentence is in smallcaps in IE6 and ordinary in FF. Not much of an issue, but an issue nonetheless. [/pedant] pix http://www.pixeldiva.co.uk ****************************************************** I see what you mean. But the error in line 3 isn't due to the use of multiple classes in IE. Its the result of the dotted notation used in the attribute selector p.underline.small. According to the specs, any list of space separated attributes containing the attributes in the dotted list will result in the rule associated with the dotted notation being applied . What IE does wrong is to treat small in example three as if it were inherited. Its not. Its an attribute selector and shouldn't be applied. It should and is applied in line 4. While this is a perfectly legal and correct means to do attribute selection, it seems to me, at least, unlikely to be used extensively. So having a little care will avoid the problem created by IE's mistake without having to give up the advantages of using multiple classes. Here's the relevant example from the specs: For example, we can assign style information to all elements with class~="pastoral" as follows: *.pastoral { color: green } /* all elements with class~=pastoral */ or just .pastoral { color: green } /* all elements with class~=pastoral */ The following assigns style only to H1 elements with class~="pastoral": H1.pastoral { color: green } /* H1 elements with class~=pastoral */ Given these rules, the first H1 instance below would not have green text, while the second would: <H1>Not green</H1> <H1 class="pastoral">Very green</H1> To match a subset of "class" values, each value must be preceded by a ".", in any order. Example(s): For example, the following rule matches any P element whose "class" attribute has been assigned a list of space-separated values that includes "pastoral" and "marine": p.pastoral.marine { color: green } This rule matches when class="pastoral blue aqua marine" but does not match for class="pastoral blue". /*Note.* CSS gives so much power to the "class" attribute, that authors could conceivably design their own "document language" based on elements with almost no associated presentation (such as DIV and SPAN in HTML) and assigning style information through the "class" attribute. Authors should avoid this practice since the structural elements of a document language often have recognized and accepted meanings and author-defined classes may not./ http://www.w3.org/TR/CSS21/selector.html#attribute-selectors) The cautionary note is particularly interesting. drew. ****************************************************** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ******************************************************
