What’s the difference between 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<\/a> from a while back. <\/p>\n Perhaps a good way to explain their difference is reason them out in “plain English”.<\/p>\n <\/p>\n “Select any div element that is a child of any element with a class name of “container”<\/em><\/p>\n “Select any div element that has a class name of “container”<\/em><\/p>\n They key difference between them is the space<\/strong>. A space in a CSS selector has very special meaning. It means that the part of the selector that occurs right<\/em> of the space is within (a child of) the part of the selector to the left<\/em>. This doesn’t apply to your second example, because it has no space. <\/p>\n The second concept at work here is what is called tag qualifying<\/em>, which can be a bit confusing. The tag qualified selector is 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 while back. Perhaps a good […]<\/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],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":339138,"url":"https:\/\/css-tricks.com\/next-gen-css-container\/","url_meta":{"origin":8278,"position":0},"title":"Next Gen CSS: @container","date":"May 11, 2021","format":false,"excerpt":"Chrome is experimenting with @container, a property within the CSS Working Group Containment Level 3 spec being championed by Miriam Suzanne of Oddbird, and a group of engineers across the web platform. @container brings us the ability to style elements based on the size of their parent container. The @container\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/Screen-Shot-2021-05-11-at-7.38.01-AM.png?fit=1200%2C550&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":333608,"url":"https:\/\/css-tricks.com\/going-from-solid-to-knockout-text-on-scroll\/","url_meta":{"origin":8278,"position":1},"title":"Going From Solid to Knockout Text on Scroll","date":"February 3, 2021","format":false,"excerpt":"Here\u2019s a fun CSS trick to show your friends: a large title that switches from a solid color to knockout text as the background image behind it scrolls into place. And we can do it using plain ol\u2019 HTML and CSS! This effect is created by rendering two containers with\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/solid-knockout-text.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":334042,"url":"https:\/\/css-tricks.com\/how-to-create-a-shrinking-header-on-scroll-without-javascript\/","url_meta":{"origin":8278,"position":2},"title":"How to Create a Shrinking Header on Scroll Without JavaScript","date":"February 16, 2021","format":false,"excerpt":"Imagine a header of a website that is nice and thick, with plenty of padding on top and bottom of the content. As you scroll down, it shrinks up on itself, reducing some of that padding, making more screen real estate for other content. Normally you would have to use\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/shrinking-sticky-header-1.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":352819,"url":"https:\/\/css-tricks.com\/animation-techniques-for-adding-and-removing-items-from-a-stack\/","url_meta":{"origin":8278,"position":3},"title":"Animation Techniques for Adding and Removing Items From a Stack","date":"October 4, 2021","format":false,"excerpt":"Animating elements with CSS can either be quite easy or quite difficult depending on what you are trying to do. Changing the background color of a button when you hover over it? Easy. Animating the position and size of an element in a performant way that also affects the position\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/stack-of-items.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":363882,"url":"https:\/\/css-tricks.com\/css-raise-the-curtains-effect\/","url_meta":{"origin":8278,"position":4},"title":"How to Make a \u201cRaise the Curtains\u201d Effect in CSS","date":"March 2, 2022","format":false,"excerpt":"\u201cRaise the curtains\u201d is what I call an effect where the background goes from dark to light on scroll, and the content on top also goes from light to dark while in a sticky position. Here\u2019s an example where I used the effect on a real-life project: https:\/\/videopress.com\/v\/VJgwbTsL?resizeToParent=true&cover=true&playsinline=true&preloadContent=metadata Want to\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/curtain-effect.png?fit=1200%2C540&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":351454,"url":"https:\/\/css-tricks.com\/building-a-form-in-php-using-domdocument\/","url_meta":{"origin":8278,"position":5},"title":"Building a Form in PHP Using DOMDocument","date":"September 14, 2021","format":false,"excerpt":"Learn how to build an HTML form in PHP using DOMDocument \u2014 a structured and expressive way to build logical markup.","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/cover@2x.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/8278"}],"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=8278"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/8278\/revisions"}],"predecessor-version":[{"id":8285,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/8278\/revisions\/8285"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=8278"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=8278"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=8278"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}.container div { }<\/code> and div.container { }<\/code>?<\/p><\/blockquote>\n.container div<\/h4>\n
![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/01\/containerdiv.png?resize=570%2C300\" "\\"containerdiv\\"")
<\/p>\ndiv.container<\/h4>\n
![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/01\/divcontainer.png?resize=570%2C300\" "\\"divcontainer\\"")
<\/p>\ndiv.container<\/code>. It means that it will select only <div><\/code> elements with a class name of “container” and no other elements. Remove the div<\/code> and you have .container<\/code> which is nearly the same thing only will select any element with that class name. A tag qualified selector has ever-so-slightly more specificity<\/a>. Personally, I rarely ever use tag qualified selectors. They are less flexible and technically less efficient<\/a>. <\/p>\n","protected":false},"excerpt":{"rendered":"