travisbrown
Technical User
- Dec 31, 2001
- 1,016
Are there any validation or compatibility issues with double classing things, like class="class1 class2"?
Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations Rhinorhino on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
Double Classing
- Thread starter travisbrown
- Start date
- Status
BillyRayPreachersSon
Programmer
Yes... in IE only, it seems.
Take the following:
Only the last paragraph should be highlighted, but IE erroneously matches elements with the last class in the rule, as well as those that match all.
Not a problem if you're aware of it, and have CSS to cater for this, if needed.
Hope this helps,
Dan
[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
Take the following:
Code:
<html>
<head>
<style type="text/css">
#myDiv p.classA.classB {
background-color: gold;
}
</style>
</head>
<body>
<div id="myDiv">
<p class="classA">Class A only</p>
<p class="classB">Class B only</p>
<p class="classA classB">Class A and Class B</p>
</div>
</body>
</html>Only the last paragraph should be highlighted, but IE erroneously matches elements with the last class in the rule, as well as those that match all.
Not a problem if you're aware of it, and have CSS to cater for this, if needed.
Hope this helps,
Dan
[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
I may not be thinking this through correctly but I don't think that's quite right.
Adding classes together is a way to apply more than 1 style rule to a single element.
so with:
We could do:
As far as I know, this works in IE.
Now unless this bottle of wine is deceiving me, that's not quite the same as what you were demonstrating Dan.
Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK
Adding classes together is a way to apply more than 1 style rule to a single element.
so with:
Code:
.styleA {
color:red;
}
.styleB {
font-weight:bold;
}We could do:
Code:
<p class="styleA">This should be red</p>
<p class="styleB">This should be bold</p>
<p class="styleA styleB">This should be both red and bold</p>As far as I know, this works in IE.
Now unless this bottle of wine is deceiving me, that's not quite the same as what you were demonstrating Dan.
Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK
BillyRayPreachersSon
Programmer
You're not wrong - you're just looking at it from a different angle, I think (and I've had a few wines - so bear with me ;-))
What you've shown holds correct, in that individual style rules that are both mentioned in the class declaration are both applied.
However, if the rule contains multiple classes, they both have to be present in the class name for the rule to affect the element in question, AFAIK.
IE is buggy in this respect.
![[cheers]](/data/assets/smilies/cheers.gif "[cheers] [cheers]")
! *hic*
[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
What you've shown holds correct, in that individual style rules that are both mentioned in the class declaration are both applied.
However, if the rule contains multiple classes, they both have to be present in the class name for the rule to affect the element in question, AFAIK.
IE is buggy in this respect.
! *hic*[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
I see the bug.
However I would question why you'd do that, it's getting a bit over complex imho
Seems much neater to declare separate classes and apply them as needed.
Travisbrown
So providing *you* set up separate classes and don't create style rules with sub classes (as in Dan's example) you should be ok.
Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK
However I would question why you'd do that, it's getting a bit over complex imho
Seems much neater to declare separate classes and apply them as needed.
Travisbrown
So providing *you* set up separate classes and don't create style rules with sub classes (as in Dan's example) you should be ok.
Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK
- Status
Similar threads