How to combine class and ID in CSS selector

Question

If I have the following div    lt div class  sectionA  id  content  gt      Lorem Ipsum     lt  div gt    Is there a way to define a style that expresses the idea  A div with id  content  AND class  myClass     Or do you have simply go one way or the other as in    lt div class  content-sectionA  gt      Lorem Ipsum     lt  div gt    Or   lt div id  content-sectionA  gt      Lorem Ipsum     lt  div gt

User · Answer

You can combine ID and Class in CSS  but IDs are intended to be unique  so adding a class to a CSS selector would over-qualify it

User · Answer

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

User · Answer

I think you are all wrong   IDs versus Class is not a question of specificity  they have completely different logical uses   IDs should be used to identify specific parts of a page   the header  the nav bar  the main article  author attribution  footer   Classes should be used to apply styles to the page   Let s say you have a general magazine site   Every page on the site is going to have the same elements--header  nav  main article  sidebar  footer   But your magazine has different sections--economics  sports  entertainment   You want the three sections to have different looks--economics conservative and square  sports action-y  entertainment bright and young   You use classes for that   You don t want to have to make multiple IDs-- economics-article and  sports-article and  entertainment-article   That doesn t make sense   Rather  you would define three classes   economics  sports  and  entertainment  then define the  nav   article  and  footer ids for each

User · Answer

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

User · Answer

sectionA id  content     color   red      Won t work when the doctype is html 4 01 though

User · Answer

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

User · Answer

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

User · Answer

use  tag id   tag classin the tag variables in your css

User · Answer

Ids are supposed to be unique document wide  so you shouldn t have to select based on both   You can assign an element multiple classes though with class  class1 class2

[css] How to combine class and ID in CSS selector?

Examples related to css

Examples related to css-selectors