How to combine class and ID in CSS selector?
There's nothing wrong with combining an id and a class on one element, but you shouldn't need to identify it by both for one rule. If you really want to you can do:
#content.sectionA{some rules}
You don't need the div
in front of the ID as others have suggested.
In general, CSS rules specific to that element should be set with the ID, and those are going to carry a greater weight than those of just the class. Rules specified by the class would be properties that apply to multiple items that you don't want to change in multiple places anytime you need to adjust.
That boils down to this:
.sectionA{some general rules here}
#content{specific rules, and overrides for things in .sectionA}
Make sense?
Well generally you shouldn't need to classify an element specified by id, because id is always unique, but if you really need to, the following should work:
div#content.sectionA {
/* ... */
}
There are differences between #header .callout
and #header.callout
in css.
Here is the "plain English" of #header .callout
:
Select all elements with the class name callout
that are descendants of the element with an ID of header
.
And #header.callout
means:
Select the element which has an ID of header
and also a class name of callout
.
You can read more here css tricks
In your stylesheet:
div#content.myClass
Edit: These might help, too:
div#content.myClass.aSecondClass.aThirdClass /* Won't work in IE6, but valid */
div.firstClass.secondClass /* ditto */
and, per your example:
div#content.sectionA
Edit, 4 years later: Since this is super old and people keep finding it: don't use the tagNames in your selectors. #content.myClass
is faster than div#content.myClass
because the tagName adds a filtering step that you don't need. Use tagNames in selectors only where you must!