{"id":292867,"date":"2019-07-22T14:39:06","date_gmt":"2019-07-22T21:39:06","guid":{"rendered":"https:\/\/css-tricks.com\/?p=292867"},"modified":"2019-07-22T14:39:06","modified_gmt":"2019-07-22T21:39:06","slug":"css-not-with-multiple-classes","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/css-not-with-multiple-classes\/","title":{"rendered":"CSS :not() with Multiple Classes"},"content":{"rendered":"<p>Say you want to select an element when it doesn&#8217;t have a certain class. That&#8217;s what <a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/n\/not\/\">the <code>:not()<\/code> selector<\/a> is for. <\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">body:not(.home) {\r\n  \r\n}<\/code><\/pre>\n<p>But what if there are multiple classes you want to avoid?<\/p>\n<p><!--more--><\/p>\n<p>There are no logical combinators with <code>:not()<\/code>, like <code>and<\/code> or <code>or<\/code>, but you can <em>chain<\/em> them, which is effectively like <code>and<\/code>. <\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">body:not(.home):not(.away):not(.page-50) {\r\n  \r\n}<\/code><\/pre>\n<p>The <code>:not()<\/code> selector doesn&#8217;t add any specificy by itself, but what is inside does, so <code>:not(.foo)<\/code> adds the same weight as <code>.foo<\/code> does. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Say you want to select an element when it doesn&#8217;t have a certain class. That&#8217;s what the :not() selector is for. body:not(.home) { } But what if there are multiple classes you want to avoid?<\/p>\n","protected":false},"author":3,"featured_media":292885,"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":true,"jetpack_social_options":[]},"categories":[4],"tags":[1506],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/07\/css-chaining-not.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":354115,"url":"https:\/\/css-tricks.com\/supports-selector\/","url_meta":{"origin":292867,"position":0},"title":"@supports selector()","date":"October 19, 2021","format":false,"excerpt":"I didn't realize the support for @supports determining selector support was so good! I usually think of @supports as a way to test for property: value pair support. But with the selector() function, we can test for selector support as well. It looks like this: @supports selector(:nth-child(1 of .foo)) {\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/02\/supports-code.png?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":292867,"position":1},"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 &quot;Article&quot;","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":302917,"url":"https:\/\/css-tricks.com\/a-complete-guide-to-data-attributes\/","url_meta":{"origin":292867,"position":2},"title":"A Complete Guide to Data Attributes","date":"February 17, 2020","format":false,"excerpt":"Everything you ever wanted to know about data attributes in HTML, CSS, and JavaScript.","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/02\/data-attribute-guide.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":277540,"url":"https:\/\/css-tricks.com\/using-feature-detection-conditionals-and-groups-with-selectors\/","url_meta":{"origin":292867,"position":3},"title":"Using Feature Detection, Conditionals, and Groups with Selectors","date":"October 19, 2018","format":false,"excerpt":"CSS is designed in a way that allows for relatively seamless addition of new features. Since the dawn of the language, specifications have required browsers to gracefully ignore any properties, values, selectors, or at-rules they do not support. Consequently, in most cases, it is possible to successfully use a newer\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/10\/supported-selectors.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":5690,"url":"https:\/\/css-tricks.com\/multiple-class-id-selectors\/","url_meta":{"origin":292867,"position":4},"title":"Multiple Class \/ ID and Class Selectors","date":"February 22, 2010","format":false,"excerpt":"Can you spot the difference between these two selectors? #header.callout { } #header .callout { } 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\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":267066,"url":"https:\/\/css-tricks.com\/using-sass-control-scope-bem-naming\/","url_meta":{"origin":292867,"position":5},"title":"Using Sass to Control Scope With BEM Naming","date":"February 28, 2018","format":false,"excerpt":"Controlling scope is something you probably don't tend to consider when working with CSS and Sass. We have had access to the ampersand (&) for quite some time now, which gives us a level of scope\u2014but it's easy for it to lose its usefulness when you're nested quite deeply. The\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/02\/ampersand.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/292867"}],"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=292867"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/292867\/revisions"}],"predecessor-version":[{"id":292884,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/292867\/revisions\/292884"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/292885"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=292867"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=292867"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=292867"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}