RE: [WSG] Multiple classes applied to one element
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of pixeldiva
Sent: Friday, April 01, 2005 10:16 AM
To: wsg@webstandardsgroup.org
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:
H1Not green/H1
H1 class=pastoralVery 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
**
[WSG] Multiple classes applied to one element
From what I understand, if you want to apply multiple classes to the one element, you do the following: p class=class1 class2 Is this proper valid code accepted in modern browsers or is there anything I should know to concern me with about using it? Thanks, Stephen -- No virus found in this outgoing message. Checked by AVG Anti-Virus. Version: 7.0.308 / Virus Database: 266.9.1 - Release Date: 01/04/2005 ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Multiple classes applied to one element
This is certainly valid code and as far as I know, it is accepted across modern browsers. I've used it quite a lot and have never had any trouble with it. I find it quite useful. Alan Trick Stevio wrote: From what I understand, if you want to apply multiple classes to the one element, you do the following: p class=class1 class2 Is this proper valid code accepted in modern browsers or is there anything I should know to concern me with about using it? Thanks, Stephen ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Multiple classes applied to one element
Stevio wrote:
Is this proper valid code accepted in modern browsers or is there anything
I should know to concern me with about using it?
In fact, it is valid code and supported by modern browsers.
(Not supported by Netscape 4, OmniWeb and IE 4 Mac and some issues with IE in
general as Kornel already mentioned)
One thing you should avoid is to define duplicate attributes for both
classes... e.g.
p class=class1 class2/p
and using CSS like:
.class1{
margin: 10px 5px;
}
.class2{
margin: 2px;
text-align: justify;
}
(As this might interfere the interpretation of 'margin' in different browsers
where maybe only the second 'margin' is used...I'm not sure about that...)
For efficient usage you might use clearly named classes:
p class=grey justified/p
.grey{
color: #cc;
}
.justified{
text-align: justify;
}
Which would offer you the option to have Paragraphs with different
text-alignments, and also use grey-colored text in e.g. Headlines (h2...etc.)
I think it is a matter of your 'style' writing CSS if you use them or not.
A good application would be creating a 'stock' of classes, e.g. seperate colors
and sizes in 'one-line-classes' and distribute them to your elements.
Just a suggestion.
Regards,
Tim
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Multiple classes applied to one element
On Fri, 01 Apr 2005 15:03:32 +0100, Tim Isenheim [EMAIL PROTECTED] wrote:
p class=grey justified/p
.grey{
color: #cc;
}
.justified{
text-align: justify;
}
I strongly disagree. You shouldn't name classes by how they look.
span class=red
font color=red
Read http://www.w3.org/QA/Tips/goodclassnames
--
regards, Kornel Lesiski
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Multiple classes applied to one element
- Original Message - From: Kornel Lesinski [EMAIL PROTECTED] Except that multiple classes selector doesn't really work in Internet Explorer, ofcourse. http://www.quirksmode.org/css/multipleclasses.html Are you meant/allowed to define classes like that page says: The example given is a definition of: p.underline.small (See the page for all the definitions.) The example above is a definition for when an element uses both of these classes (which both have their own definitions), but that is going one step further than I need. Up to now I would not define a class like that, but maybe it is valid. Stephen -- No virus found in this outgoing message. Checked by AVG Anti-Virus. Version: 7.0.308 / Virus Database: 266.9.1 - Release Date: 01/04/2005 ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Multiple classes applied to one element
Kornel Lesinski wrote:
I strongly disagree. You shouldn't name classes by how they look.
span class=red
font color=red
Read http://www.w3.org/QA/Tips/goodclassnames
Well, you're right. Please excuse that miscarried example.
I only used it arbitrarily for pointing out the multiple-class combination of
completely different properties.
On Fri, 01 Apr 2005 15:03:32 +0100, Tim Isenheim [EMAIL PROTECTED] wrote:
p class=grey justified/p
.grey{
color: #cc;
}
.justified{
text-align: justify;
}
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
RE: [WSG] Multiple classes applied to one element
-Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Kornel Lesinski Sent: Friday, April 01, 2005 8:56 AM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Multiple classes applied to one element On Fri, 01 Apr 2005 14:27:35 +0100, Alan Trick [EMAIL PROTECTED] wrote: This is certainly valid code and as far as I know, it is accepted across modern browsers. I've used it quite a lot and have never had any trouble with it. I find it quite useful. Except that multiple classes selector doesn't really work in Internet Explorer, ofcourse. http://www.quirksmode.org/css/multipleclasses.html -- regards, Kornel Lesiski ** Actually the example works just fine in IE6. 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 **
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 ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
