{"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 list of selectors to match against, except that where :is() takes the most specific among them as the specificity of that whole part, the specificity of :where() is always zero (0).<\/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":{"_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":""},"tags":[15914],"acf":[],"jetpack-related-posts":[{"id":14279,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/u\/universal\/","url_meta":{"origin":336866,"position":0},"title":"Universal","date":"September 6, 2011","format":false,"excerpt":"The Universal Selector is the * in CSS. Literally the asterisk character. It is essentially a type selector that matches any type. Type meaning an HTML tag like , , , or literally any of the others. A common use is in the universal reset, like this: * { margin:\u2026","rel":"","context":"With 5 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14164,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/c\/class\/","url_meta":{"origin":336866,"position":1},"title":"Class","date":"September 6, 2011","format":false,"excerpt":"A class selector in CSS starts with a dot (.), like this: .class { } A class selector selects all elements with a matching class attribute. For example, this element: