Chris notes the difference between these two structures:
#header.callout {...}
#header .callout {...}
The only difference is the single space between the ID and the class selectors in the second one. But, he notes, the difference is substantial:
Here is the “plain English” of “#header .callout”:
Select all elements with the class name callout that are decendents of the element with an ID of header. Here is the “plain English” of “#header.callout”:
Select the element which has an ID of header and also a class name of callout.
The big point here is that you can target elements that have combinations of classes and IDs by stringing those selectors together without spaces.
This came up for me in a design I’m doing. I didn’t know this then, but I do now, and it will make a difference in my CSS and HTML structuring. It’s a subtle but significant thing. What do you guys think?
(I just recently began reading CSS-Tricks. It’s a regular stop for me now.)
The version without the space is only useful where you have multiple pages that have the id where not all have the class on the same element. If you are looking at a single page then just specifying the id is sufficient identification because the id has to be unique within the page.
Having multiple references separated by a space, > or + are good ways of being able to style elements without needing to give them their own class or id as you can reference them based on what they are contained in.
IE 6 is rather weird. It selects based on the first selector in the list. So “.red.border” will select based on just “.red”, which kinda ruins things. But if you are supporting IE 6, you are used to this kind of tomfoolery anyway and can just fix it with conditional styles.
I think most of us have no choice but to support IE6, like it or not. I’m not fond of conditional styles, but will use them when I have to (and when I can figure the damn things out :)).
Multiples
We aren’t limited to only two here, we can combine as many classes and IDs into a single selector as we want.
.snippet#header.code.red { color: red; }
…
Browser Compatibility
All good current browsers support this as well as IE back to version 7. IE 6 is rather weird. It selects based on the first selector in the list. So “.red.border” will select based on just “.red”, which kinda ruins things. But if you are supporting IE 6, you are used to this kind of tomfoolery anyway and can just fix it with conditional styles.
Seems like Chris Coyier also missed another issue when using an id concatenated with different classes in IE6:
If any concatenated id-class selector could be missing in the current html code, IE6 could fail. (Mind that IE6 will only see the last class also when the id is concatenated with more than one class.)
From the SP reference;
In Internet Explorer versions up to and including 6, if an ID selector that’s combined with a class selector is unmatched, all subsequent ID selectors that use the same ID and are combined with a class selector, are also treated as unmatched.
Concatenated classes in IE6:
Paul gave a test case here in post #8 that also confirms kouhotek’s statement.
