{"id":5690,"date":"2010-02-22T06:09:06","date_gmt":"2010-02-22T13:09:06","guid":{"rendered":"http:\/\/css-tricks.com\/?p=5690"},"modified":"2022-09-28T13:01:42","modified_gmt":"2022-09-28T20:01:42","slug":"multiple-class-id-selectors","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/multiple-class-id-selectors\/","title":{"rendered":"Multiple Class \/ ID and Class Selectors"},"content":{"rendered":"\n

Can you spot the difference between these two selectors?<\/p>\n\n\n\n

#header.callout {  }\n\n#header .callout { }<\/code><\/pre>\n\n\n\n
They look nearly identical, but the top one has no space between #header<\/code> and .callout<\/code> while the bottom one does. This small difference makes a huge difference in what it does. To some of you, that top selector may seem like a mistake, but it’s actually a quite useful selector. Let’s see the difference, what that top selector means, and exploring more of that style selector.<\/p>\n\n\n\n\n\n\n\n
Here is the “plain English” of #header .callout<\/code>:<\/p>\n\n\n\n
Select all elements with the class name callout<\/em> that are decendents of the element with an ID of header<\/em>.<\/p><\/blockquote>\n\n\n\n
Here is the “plain English” of #header.callout<\/code>:<\/p>\n\n\n\n
Select the element which has an ID of header<\/em> and also a class name of callout<\/em>.<\/p><\/blockquote>\n\n\n\n
Maybe this graphic will make that more clear:<\/p>\n\n\n\n
\"Side-by<\/figure>\n\n\n
Combinations of Classes and IDs<\/h3>\n\n\n
The big point here is that you can target elements that have combinations of class<\/code>es and ID<\/code>s by stringing those selectors together without spaces.<\/p>\n\n\n
ID and Class Selector<\/h4>\n\n\n
As we covered above, you can target elements with a combination of ID<\/code> and class<\/code>.<\/p>\n\n\n\n
<h1 id=\"one\" class=\"two\">This Should Be Red<\/h1><\/code><\/pre>\n\n\n\n
#one.two { color: red; }<\/code><\/pre>\n\n\n
Double Class Selector<\/h4>\n\n\n
Target an element that has all of multiple class<\/code>es. Shown below with two class<\/code>es, but not limited to two.<\/p>\n\n\n\n
<h1 class=\"three four\">Double Class<\/h1><\/code><\/pre>\n\n\n\n
.three.four { color: red; }<\/code><\/pre>\n\n\n
Multiples<\/h4>\n\n\n
We aren’t limited to only two here, we can combine as many class<\/code>es and ID<\/code>s into a single selector as we want.<\/p>\n\n\n\n
.snippet#header.code.red { color: red; }<\/code><\/pre>\n\n\n\n
Although bear in mind that’s getting a little ridiculous.<\/p>\n\n\n\n
Learn more about how to select IDs, classes, and multiple classes at DigitalOcean<\/a>.<\/p>\n\n\n
Example<\/h3>\n\n\n
So how useful is all this really? Especially with ID<\/code>s, they are supposed to be unique anyway, so why would you need to combine it with a class<\/code>? I admit the use cases for the ID<\/code> versions are slimmer, but there are certainly uses. One of those is overriding styles easily.<\/p>\n\n\n\n
#header { color: red; }\n#header.override { color: black; } <\/code><\/pre>\n\n\n\n
The second targets the same element, but overrides the color, instead of having to use:<\/p>\n\n\n\n
.override { color: black !important }<\/code><\/pre>\n\n\n\n
Or perhaps prefacing the selector with something even more specific.<\/p>\n\n\n\n
More useful is multiple class<\/code>es and using them in the “object oriented” CSS style that is all the rage lately. Let’s say you had a bunch of div<\/code>s on a page, and you used multiple various descriptive class<\/code> names on them:<\/p>\n\n\n\n
<div class=\"red border box\"><\/div>\n<div class=\"blue border box\"><\/div>\n<div class=\"green border box\"><\/div>\n<div class=\"red box\"><\/div>\n<div class=\"blue box\"><\/div>\n<div class=\"green box\"><\/div>\n<div class=\"border box\"><\/div><\/code><\/pre>\n\n\n\n
They all share the class<\/code> “box”, which perhaps sets a width or a background texture, something that all of them have in common. Then some of them have color names as class<\/code>es, this would be for controlling the colors used inside the box. Perhaps green means the box has a greenish background and light green text. A few of them have a class<\/code> name of “border”, presumably these would have a border on them while the rest would not.<\/p>\n\n\n\n
So let’s set something up:<\/p>\n\n\n\n
.box { width: 100px; float: left; margin: 0 10px 10px 0; }\n.red { color: red; background: pink; }\n.blue { color: blue; background: light-blue; }\n.green { color: green; background: light-green; }\n.border { border: 5px solid black; }<\/code><\/pre>\n\n\n\n
Cool, we have a good toolbox going here, where we can create new boxes and we have a variety of options, we can pick a color and if it has a border or not just by applying some fairly semantic class<\/code>es. Having this class<\/code> name “toolbox” also allows us to target unique combinations of these class<\/code>es. For example, maybe that black border isn’t working on the red boxes, let’s fix that:<\/p>\n\n\n\n
.red.border { border-color: #900; }<\/code><\/pre>\n\n\n\n
\"Three
Border color on red box changed because it had both the red class and border class<\/figcaption><\/figure>\n\n\n\n
Based on this demo page<\/a>.<\/p>\n\n\n
Specificity<\/h3>\n\n\n
Also important to note here is that the specificity values<\/a> of selectors like this will carry the same weight as if they were separate. This is what gives these the overriding power like the example above.<\/p>\n\n\n\n
Learn more about specificity in CSS at DigitalOcean<\/a>.<\/p>\n\n\n
Browser Compatibility<\/h3>\n\n\n
All good current browsers support this as well as IE back to version 7. IE 6 is rather weird. It selects based on the last<\/em> selector in the list. So “.red.border<\/code>” will select based on just “.border<\/code>“, 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.<\/p>\n","protected":false},"excerpt":{"rendered":"
Can you spot the difference between these two selectors? They look nearly identical, but the top one has no space between #header and .callout while the bottom one does. This small difference makes a huge difference in what it does. To some of you, that top selector may seem like a mistake, but it’s actually […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4,20],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":336424,"url":"https:\/\/css-tricks.com\/the-css-has-selector\/","url_meta":{"origin":5690,"position":0},"title":"The CSS :has Selector (and 4+ Examples)","date":"March 17, 2021","format":false,"excerpt":"The CSS :has selector helps you select elements when they contain other elements that match the selector you pass into :has().","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/has-pseudo-example.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":5514,"url":"https:\/\/css-tricks.com\/child-and-sibling-selectors\/","url_meta":{"origin":5690,"position":1},"title":"Child and Sibling\u00a0Selectors","date":"April 14, 2010","format":false,"excerpt":"Do you know what the difference between these selectors are? ul li { margin: 0 0 5px 0; } ul > li { margin: 0 0 5px 0; } I'll admit it took me longer than it probably should have (way back when) when I was learning the basics of\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/child-combinator-selector-example.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":192577,"url":"https:\/\/css-tricks.com\/strategies-keeping-css-specificity-low\/","url_meta":{"origin":5690,"position":2},"title":"Strategies for Keeping CSS Specificity Low","date":"January 12, 2015","format":false,"excerpt":"Keeping CSS specificity low across all the selectors in your project is a worthy goal. It's generally a sign that things are in relative harmony. You aren't fighting against yourself and you have plenty of room to override styles when you need to. Specificity on selectors tends to creep up\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":376342,"url":"https:\/\/css-tricks.com\/has-is-an-unforgiving-selector\/","url_meta":{"origin":5690,"position":3},"title":":has is an unforgiving selector","date":"January 11, 2023","format":false,"excerpt":"A little thing happened on the way to publishing the CSS :has() selector to the ol' Almanac. I had originally described :has() as a \"forgiving\" selector, the idea being that anything in its argument is evaluated, even if one or more of the items is invalid. \/* Example: Do not\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/06\/where-specificity.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":22342,"url":"https:\/\/css-tricks.com\/the-extend-concept\/","url_meta":{"origin":5690,"position":4},"title":"The Extend Concept","date":"July 8, 2013","format":false,"excerpt":"All three of the most popular CSS preprocessors support extend. I don't have any data, but in my experience this feature is confusing at first and thus a bit under used. I thought we could talk a bit about how it works, why and when to use it, some gotchas,\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2013\/07\/extend.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":8278,"url":"https:\/\/css-tricks.com\/whats-the-difference\/","url_meta":{"origin":5690,"position":5},"title":"What’s the Difference?","date":"January 10, 2011","format":false,"excerpt":"Reader Paul writes in: What's the difference between .container div { } and div.container { }? It's great you are asking questions like this Paul. The answer is very important to understanding CSS, because these two selectors select very different things. This is pretty similar to this question from a\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/01\/divcontainer.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/5690"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=5690"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/5690\/revisions"}],"predecessor-version":[{"id":373931,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/5690\/revisions\/373931"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=5690"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=5690"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=5690"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}