{"id":336866,"date":"2021-03-23T08:06:11","date_gmt":"2021-03-23T15:06:11","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=336866"},"modified":"2021-07-14T12:13:18","modified_gmt":"2021-07-14T19:13:18","slug":"where","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/selectors\/w\/where\/","title":{"rendered":":where"},"content":{"rendered":"\n

The :where()<\/code> pseudo selector in CSS is functionally identical to the :is()<\/code> psuedo selector<\/a> in that it takes a comma-separated list of selectors to match against, except that where :is()<\/code> takes the most specific<\/em> among them as the specificity of that whole part, the specificity of :where()<\/code> is always zero (0)<\/strong>.<\/p>\n\n\n\n\n\n\n\n

For example:<\/p>\n\n\n\n

main :where(h1, h2, h3) {\n  color: orange;\n}<\/code><\/pre>\n\n\n\n
Matches as if you wrote that selector like this:<\/p>\n\n\n\n
main h1, main h2, main h3 {\n  color: orange;\n}<\/code><\/pre>\n\n\n\n
…except the specificity of the first example above is (0, 0, 0, 1) for the single element selector (main<\/code>) and doesn’t include the specificity of anything in the :where()<\/code> part. Whereas, in the second example, the specificity is (0, 0, 0, 2) because there are two element selectors.<\/p>\n\n\n
Deciding on specificity handling<\/h3>\n\n\n
It’s a tough call deciding if you want the specificity of :is()<\/code> or the zero-specificity of :where()<\/code>, although I might argue that keeping specificity low in general leads to fewer headaches than working with elements that have a higher specificity. <\/p>\n\n\n\n
Imagine a classic layout:<\/p>\n\n\n\n
<header class=\"header\"><\/header>\n<main class=\"main\"><\/header>\n<aside class=\"aside\"><\/aside>\n<footer class=\"footer\"><\/footer><\/code><\/pre>\n\n\n\n
If I want to select the links in the header and footer, I could…<\/p>\n\n\n\n
:is(.header, .footer) a {\n  color: red;\n}<\/code><\/pre>\n\n\n\n
That selector is (0, 0, 1, 0), meaning if I were to write:<\/p>\n\n\n\n
header a {\n  color: orange;\n}<\/code><\/pre>\n\n\n\n
That selector is less specific at (0, 0, 0, 2), and will not override the other. But if I wrote:<\/p>\n\n\n\n
:where(.header, .footer) a {\n  color: red;\n}<\/code><\/pre>\n\n\n\n
That is only (0, 0, 0, 1), so my override will<\/em> work.<\/p>\n\n\n\n
Perhaps a less-contrived example is selecting a header by ID without having to resort to ID-level specificity. <\/p>\n\n\n\n
h3:where(#specific-header) {\n  outline: 1px solid yellow;\n}<\/code><\/pre>\n\n\n\n
There I’ve selected a header with a specific ID. IDs have very high specificity\u2009\u2014\u2009(0, 1, 0, 0)\u2009\u2014\u2009which is hard to override, but here I’ve managed to select just that header<\/em>, but not use any super high specificity to do it. <\/p>\n\n\n
Forgiving selectors<\/h3>\n\n\n
Each selector within the comma-separated list within :where(x, y, z)<\/code> is forgiving in that it is ignored if it is invalid. That is important because it doesn’t wipe out the entire selector like invalid selectors normally do<\/a>. For more information, see how it works with the :is()<\/code> selector<\/a> since it is identical. <\/p>\n\n\n\n
:where(h1, totally:fake) {\n  \/* will still select h1 *\/\n}<\/code><\/pre>\n\n\n
Browser support<\/h3>\n\n\n
IE<\/th>Edge<\/th>Firefox<\/th>Chrome<\/th>Safari<\/th>Opera<\/th><\/tr><\/thead>
No<\/td>88<\/td>78<\/td>88<\/td>14<\/td>74<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Android Chrome<\/th>Android Firefox<\/th>Android Browser<\/th>iOS Safari<\/th>Opera Mobile<\/th><\/tr><\/thead>
All<\/td>All<\/td>91<\/td>14.4<\/td>No<\/td><\/tr><\/tbody><\/table>
Source: caniuse<\/a><\/figcaption><\/figure>\n\n\n
More information<\/h3>\n\n\n    \t\t\n    
\n      
\n\n  
\n    \n      CSS :is() and :where() are coming to browsers    <\/a>\n  <\/h3>\n\n  \n      
\n      :where<\/a>    <\/div>\n  \n  
\n    \n          <\/a>\n  \n    \n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n
\n\n  
\n    \n      What\u2019s New In CSS?    <\/a>\n  <\/h3>\n\n  \n      
\n      :where<\/a>    <\/div>\n  \n  
\n    \n          <\/a>\n  \n    \n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n
\n\n  
\n    \n      Platform News: Prefers Contrast, MathML, :is(), and CSS Background Initial Values    <\/a>\n  <\/h3>\n\n  \n      
\n      :where<\/a>    <\/div>\n  \n  
\n    \n          <\/a>\n  \n    \n      \u0160ime Vidas    <\/a>\n  <\/div>\n\n<\/article>\n    <\/div>\n  \n","protected":false},"excerpt":{"rendered":"
The :where() pseudo selector in CSS is functionally identical to the :is() psuedo selector in that it takes a comma-separated […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":14287,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-almanac-single.php","meta":{"_acf_changed":false,"_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":"","_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"tags":[15914],"acf":[],"share_on_mastodon":{"url":"","error":""},"jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/336866"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"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=336866"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/336866\/revisions"}],"predecessor-version":[{"id":344738,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/336866\/revisions\/344738"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14287"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=336866"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=336866"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}