Is it possible to have one ID plus one or more Classes in the same element?
For example…
<!-- Upcoming Events -->
<div id="events" class="box highlightBox">
<h2 class="headerBar">Upcoming Events</h2>
<p>Lorem ipsum dolor sit amet...</p>
</div>
The reason I want to do this is that I would like all “boxes” to be driven off the same Class(es), but also have a way to uniquely identify and style a particular “box”. 
Thanks,
Debbie
Did it work when you tried it?
<style type="text/css">
#events {
border: 1px solid red;
}
.box {
background-color: burlywood
}
.highlightBox {
color: green;
}
</style>
btw - yes 
Doesn’t matter if it worked for me.
The questions always is, “Can you legitimately do it for all browsers or will it blow something up?!”
I found an article in 2004 that says, “Yes, you can do it.”
But would you want to and what are the consequences?! :-/
Debbie
Now you’re changing the scope of your original question - seems like you are making things up as you go along again :D.
When you say “all” browsers, are you aware of how many browsers there are out there in existence?
Why not specify the browsers and their versions you want to support?
Another obvious questions is, “Is having both an ID and a Class in an Element more help or harm from a maintenance standpoint?”
Here is a simple example that demonstrates this…
Scenario #1: Using IDs + 1 Class
.box{
margin: 20px 0;
border: 1px solid #AAA;
}
#boxFeatured{
font-size: 1em;
}
#boxEvents{
font-size: 2em;
}
#boxFactoids{
font-size: 3em;
}
#boxTip{
font-size: 4em;
}
Scenario #2: Folding things Separate ID’s only
#boxFeatured{
font-size: 1em;
margin: 20px 0;
border: 1px solid #AAA;
}
#boxEvents{
font-size: 2em;
margin: 20px 0;
border: 1px solid #AAA;
}
#boxFactoids{
font-size: 3em;
margin: 20px 0;
border: 1px solid #AAA;
}
#boxTip{
font-size: 4em;
margin: 20px 0;
border: 1px solid #AAA;
}
Debbie
You know what I mean…
“If I have both an ID and a Class(es) in an Element, will it be supported by all modern browsers and any that most people would care about?”
If your “Yes” only works in FireFox 8 then that probably isn’t good enough.
If it doesn’t work in IE 5.5 then I’ll get over it…
Debbie
There is no “one size fits all” answer to your question. It boils down to personal preference if something can be done in more than one way.
For me, the less code I use to perform the task, the easier it is for me to maintain it.
No I don’t
“all” means each and everyone. That’s why I asked you to list the browsers and their versions you want to support.
I can only go by what you actually say. I’m not going to waste time trying to guess what you really want to know. If you ask the wrong questions, you increase the probability of not getting the answers you need.
Ok. SIMPLE ANSWER ( ass simple as possible, anyway):
YES, you can . No it won’t “blow anything up” but your mileage will vary. Still support for elements with both class (singular) and ID is nearly universal.
You will need to keep specificity in mind EVEN MORE. And older -Older -OLDER versions of IE do not like chaining ( the very handy technique of , well, chaining : #myID.myclass { color: red} for example ; but those versions also didn’t like chaining classes either…)
Another reason why you dont even have to WORRY about having both a class and an ID is that sometimes an ID is NECESSARY for non CSS stuff ( for example, in .js getElmentByID()), consequently it would have put quite a downer on at least two technologies fr this not to be possible.
Hope that has cleared your doubts, DD.
Watch your a s s, there, Dresden! 
YES, you can . No it won’t “blow anything up” but your mileage will vary. Still support for elements with both class (singular) and ID is nearly universal.
You will need to keep specificity in mind EVEN MORE. And older -Older -OLDER versions of IE do not like chaining ( the very handy technique of , well, chaining : #myID.myclass { color: red} for example ; but those versions also didn’t like chaining classes either…)
Another reason why you dont even have to WORRY about having both a class and an ID is that sometimes an ID is NECESSARY for non CSS stuff ( for example, in .js getElmentByID()), consequently it would have put quite a downer on at least two technologies fr this not to be possible.
Hope that has cleared your doubts, DD.
So technically it’ll work. Okay.
But would I want to go down that path?
Here is what I was thinking - if I didn’t explain before…
I have a generic class called…
.box{
margin: 20px 0;
padding: 1em;
border: 1px solid #AAA;
}
And then I have specific instances of “boxes” that require further styling, like…
#boxTip{
padding: 2em;
color: #F00;
}
#boxFeatured{
text-align: left;
}
#boxEvents{
background-color: #FFC;
}
If I ever decided a “box” should have a 2px Blue border, I’d only have to change my code in ONE PLACE versus possibly dozens of ID’s in the old way.
Comments or suggestions from the peanut gallery?
Debbie
The less code I have to perform a task results in fewer places amendments have to be made and so for me, the easier it is to maintain the code.
The only issue would be one of specificity in that the ids carry more weight and will win out against any rules that the class holds. However that would seem to be what you want in most cases as you would be using the id to over-ride the class anyway.
There is no problem with having classes and ids on the same element but as mentioned above IE6 doesn’t like the dot notation method of specifying them but you aren’t using that method anyway (e.g. id.classname {}).
I tend to use ids for the major structural elements of the site (#header, #footer, Content, #sidebar, #navigation etc) and the just use classes for everything else unless. In the end it doesn’t really matter but specificity will catch you out if you are not careful.
A lot of people do things like this:
Content p {color:red}
and then add a class to the p element and say:
p.highlight {color:blue}
Then they wonder why the p element is still red.
Reading this thread… Wow, and people call me an ass…
It’s in the HTML spec that you can have as many classes as you like on an element. As class and ID are separate attributes, they do not interfere with each-other EXCEPT:
It’s in the CSS spec that anything declared in an ID trumps a class – so obviously you can combine them… but beware if you try to set a value with a class that’s already decalred in the ID, it won’t take.
Also be aware that certain combinations CSS side of classes…
#boxFeatured.box (notice the lack of space between them – means both must be present on the element) will not work in certain older versions of IE and FF. (in FF it’s usually a regression error).
It’s how the {massive string of expletives omitted} over at turdpress can vomit up idiotic code like this:
<li id=“menu-item-781” class=“menu-item menu-item-type-post_type menu-item-object-page menu-item-781”>
Which just makes me want to backhand somebody…
All that taken into consideration, bloating out the uncached markup instead of the CSS is not a great approach to coding from an efficiency or bandwidth standpoint. To do what your saying, I’d be going:
#boxFeatured,
#boxEvents,
#boxFactoids,
#boxTip {
margin: 20px 0;
border: 1px solid #AAA;
}
#boxEvents {
font-size: 2em;
}
#boxFactoids {
font-size: 3em;
}
#boxTip {
font-size: 4em;
}
That way you aren’t blowing bandwidth by saying class=“box” on every single one of them in the markup. Ends up about the same amount of code in the long run, but uses less bandwidth if this CSS is being used on more than one page. Your second example would end up thus:
#boxTip,
#boxFeatured,
#boxEvents {
margin:20px 0;
padding:1em;
border:1px solid #AAA;
}
#boxTip {
padding:2em;
color:#F00;
}
#boxFeatured{
text-align:left;
}
#boxEvents{
background:#FFC;
}
Always remember the reasons to use CSS in the first place – simpler HTML, semantic HTML, reduction of bandwidth by caching appearance across pages, speeding subsequent page-loads by pre-caching appearance, and ability to restyle the page without major (or if well crafted… any) changes to the markup.
(which is why I still say the STYLE tag should be deprecated, and the STYLE attribute should only be used when the style adds meaning to the content - which is a REALLY rare occurrence; if you aren’t putting it in an external file, 90% of those reasons to use CSS don’t work)
side note, also remember the rule, change the font-size, change the line-height 
… and there’s no reason to ever say font-size:1em unless you’re overriding a previous declaration
No foaming so far today, DeathShadow?!
Dresden just can’t type, but you burn entire villages down - for no apparent reason - on some days… 
(That’d make a sweet Sig Line…) :devil:
It’s in the HTML spec that you can have as many classes as you like on an element. As class and ID are separate attributes, they do not interfere with each-other EXCEPT:
It’s in the CSS spec that anything declared in an ID trumps a class – so obviously you can combine them… but beware if you try to set a value with a class that’s already decalred in the ID, it won’t take.
Right.
Also be aware that certain combinations CSS side of classes…
#boxFeatured.box (notice the lack of space between them – means both must be present on the element) will not work in certain older versions of IE and FF. (in FF it’s usually a regression error).
I was going to use them separately, but I follow you.
It’s how the {massive string of expletives omitted} over at turdpress can vomit up idiotic code like this:
<li id=“menu-item-781” class=“menu-item menu-item-type-post_type menu-item-object-page menu-item-781”>
Which just makes me want to backhand somebody…
True.
All that taken into consideration, bloating out the uncached markup instead of the CSS is not a great approach to coding from an efficiency or bandwidth standpoint.
Okay.
To do what your saying
DeathShadow made the “YOUR” mistake?! 
(Must be a post-Thanksgiving cold!)
I’d be going:
#boxFeatured,
#boxEvents,
#boxFactoids,
#boxTip {
margin: 20px 0;
border: 1px solid #AAA;
}
#boxEvents {
font-size: 2em;
}
#boxFactoids {
font-size: 3em;
}
#boxTip {
font-size: 4em;
}
That way you aren’t blowing bandwidth by saying class=“box” on every single one of them in the markup. Ends up about the same amount of code in the long run, but uses less bandwidth if this CSS is being used on more than one page.
I was thinking about that approach last night as well.
I suppose it still accomplishes my “Write once, re-use many times”, except if you had 100 different “boxes” that would get sorta unwieldy…
I guess your key point is to “Leave the HTML alone!” (or as simple as possible).
Always remember the reasons to use CSS in the first place – simpler HTML, semantic HTML, reduction of bandwidth by caching appearance across pages, speeding subsequent page-loads by pre-caching appearance, and ability to restyle the page without major (or if well crafted… any) changes to the markup.
Fair enough.
But then what do you think about this thread of mine…
Seeking Polymorphic CSS Class
I’m not trying to go WordPress on anyone, but I am trying to simplify my code and make things more manageable.
side note, there’s no reason to ever say font-size:1em unless you’re overriding a previous declaration
That was just a silly example.
Debbie
So what if it’s in the spec’s?
If you look at post 4 you will see the op was really concerned about it’s browser support.
There are lots of things in the specs that browsers support to varying degrees and some better than others
To be fair your a different type of @ss.
…and multiclassing isn’t one of them!
so nothing’s changed
Worse, I’m on the laptop, can’t type worth a Confederate dollar on these things… again, I’d love to have a laptop with a Model M inside it. I’d settle for a modernized lunchbox.
You have more than ten different “boxes” there’s something wrong structurally or the design is absurdly inconsistent… or it’s knee deep in “too many nested DIV”. IF it were to reach that point for a legitimate reason (hard to think of one) that’s when I’d be considering adding the class…
EXACTLY!
I’m not sure what polymorphism has to do with it; though I’ve begun to suspect that said word is being used much akin to ‘web 2.0’ so far as marketspeak goes. It would be a very proactive paradigm. (6 minute mark)
I’ve re-read that thread three times now, and I’m having trouble deciphering the question or point of it… as opposed to this thread… Same question isn’t it?
I know, hence the smiley…