{"id":72388,"date":"2024-07-29T18:00:24","date_gmt":"2024-07-29T10:00:24","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=72388"},"modified":"2024-08-02T10:46:28","modified_gmt":"2024-08-02T02:46:28","slug":"where-css-selector","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/where-css-selector\/","title":{"rendered":":where() – CSS: Cascading Style Sheets"},"content":{"rendered":"

Managing CSS can be tricky, especially when styles need to override each other. This often makes it hard to keep the styles in the right places. To simplify things, the :where<\/code> selector was added in CSS. This is a special CSS selector that allows you to group selectors without increasing their specificity<\/strong>, making it easier to override styles when needed.<\/p>\n

Consider the following HTML:<\/p>\n

\r\n
\r\n\u00a0\u00a0\u00a0\u00a0
1st paragraph<\/p>\r\n\u00a0\u00a0\u00a0\u00a0
\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0
2nd paragraph<\/p>\r\n\u00a0\u00a0\u00a0\u00a0<\/section>\r\n<\/div>\r\n
\r\n\u00a0\u00a0\u00a0\u00a0
3rd paragraph<\/p>\r\n\u00a0\u00a0\u00a0\u00a0
4th paragraph<\/p>\r\n\u00a0\u00a0\u00a0\u00a0
5th paragraph<\/p>\r\n<\/section>\r\n<\/pre>\n
We have two div<\/code> elements. One is inside #root<\/code>, and the other is outside of it. We want paragraphs inside #root<\/code> to be red and paragraphs inside .section<\/code> to be green. Typically, you can write CSS as follows:<\/p>\n
\r\n#root p {\r\n    color: red;\r\n}\r\n.section p {\r\n    color: green;\r\n}\r\n<\/pre>\n
However, with this CSS, the paragraph inside .section<\/code> will be green, but the paragraphs inside #root<\/code> will remain red instead of turning green. This happens because the specificity of the #root<\/code> selector is higher than that of the .section<\/code> selector.<\/p>\n
See the Pen CSS :where selector<\/a> by HONGKIAT (@hkdc<\/a>) on CodePen<\/a>.<\/span><\/p>\n
To solve this situation, traditionally, we could update our CSS as follows:<\/p>\n
\r\n#root p {\r\n    color: red;\r\n}\r\n.section p,\r\n#root .section p {\r\n    color: green;\r\n}\r\n<\/pre>\n
But this is not ideal because it increases the specificity of the selector and makes them look more complex. It will eventually cause more problems when we need to override the styles.<\/p>\n
This is where the :where<\/code> selector comes in. With the :where<\/code> selector, you can group selectors without increasing their specificity. Here\u2019s how we can update our CSS instead:<\/p>\n
\r\n:where(#root) p {\r\n    color: red;\r\n}\r\n.section p {\r\n    color: green;\r\n}\r\n<\/pre>\n
The #root<\/code> selector is wrapped with the :where<\/code> selector, which will reduce its specificity to 0<\/code>. This will allow the paragraph inside .section<\/code> to be all green, even though it is inside #root<\/code>.<\/p>\n
See the Pen  CSS :where selector (before)<\/a> by HONGKIAT (@hkdc<\/a>)\n  on CodePen<\/a>.<\/span><\/p>\n
How is it different from the :is<\/code> selector?<\/h2>\n
The :where<\/code> selector is similar to the :is<\/a><\/code> selector, where we can group a number of selectors together. The main difference is their behavior affecting the specificity within the group. While the :where<\/code> selector will remove it (or set it to 0<\/code>), the :is<\/code> selector may increase<\/strong> the specificity of the selector with the highest specificity within the group.<\/p>\n
Let\u2019s take a look at the following example:<\/p>\n
\r\n.section p {\r\n    color: green;\r\n}\r\n\r\n.section .highlight {\r\n    color: orange;\r\n}\r\n\r\np:first-of-type {\r\n    color: red;\r\n}\r\n<\/pre>\n
The result would be that only the first and third paragraphs would turn red. The second paragraph would remain orange since .section .highlight<\/code> has higher specificity than the p:first-of-type<\/code>, even though it is also the first paragraph.<\/p>\n
See the Pen CSS :where vs :is selector<\/a> by HONGKIAT (@hkdc<\/a>) on CodePen<\/a>.<\/span><\/p>\n
Traditionally, we can always rewrite our CSS, as follows:<\/p>\n
\r\np:first-of-type,\r\n.section p:first-of-type {\r\n    color: red;\r\n}\r\n<\/pre>\n
Alternatively, we can also write it this way:<\/p>\n
\r\np:first-of-type,\r\np.highlight:first-of-type {\r\n    color: red;\r\n}\r\n<\/pre>\n
However, this again results in more complex selectors and complicated specificity issues down the road. With the :is<\/code> selector, we can have it much simpler to solve this issue with the following rules.<\/p>\n
\r\n:is(div, section, .section) p:first-of-type {\r\n    color: red;\r\n}\r\n<\/pre>\n
We group together div<\/code>, section<\/code>, and .section<\/code>. This group will have the same specificity as .section<\/code> so the color red will apply to both within the div<\/code> and the section<\/code> elements as well.<\/p>\n
See the Pen CSS :where vs :is selector (applied)<\/a> by HONGKIAT (@hkdc<\/a>) on CodePen<\/a>.<\/span><\/p>\n
Browser Compatibility<\/h2>\n\n\n\n\n\n\n\n\n\n\n\n
Browser<\/th>\nDesktop Version<\/th>\nDesktop Support<\/th>\nMobile Version<\/th>\nMobile Support<\/th>\n<\/tr>\n<\/thead>\n
Google Chrome<\/td>\n88 and later<\/td>\nSupported<\/td>\n88 and later<\/td>\nSupported<\/td>\n<\/tr>\n
Mozilla Firefox<\/td>\n78 and later<\/td>\nSupported<\/td>\n78 and later<\/td>\nSupported<\/td>\n<\/tr>\n
Safari<\/td>\n14.1 and later<\/td>\nSupported<\/td>\n14.5 and later (iOS)<\/td>\nSupported<\/td>\n<\/tr>\n
Microsoft Edge<\/td>\n88 and later<\/td>\nSupported<\/td>\n88 and later<\/td>\nSupported<\/td>\n<\/tr>\n
Opera<\/td>\n75 and later<\/td>\nSupported<\/td>\n61 and later<\/td>\nSupported<\/td>\n<\/tr>\n
Internet Explorer<\/td>\nNot supported<\/td>\nNot supported<\/td>\nNot supported<\/td>\nNot supported<\/td>\n<\/tr>\n
Samsung Internet<\/td>\nN\/A<\/td>\nN\/A<\/td>\n14.0 and later<\/td>\nSupported<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Wrapping up<\/h2>\n
The :where<\/code> selector is a great addition to CSS that allows you to group selectors without increasing their specificity. This makes it a perfect selector to add base styles to a group of elements without worrying about the specificity of the selector. It overall makes it easier to manage styles without complicating specificity and override them when needed.<\/p>\n
Bonus:<\/strong> Check out Specificity Calculator<\/a> to see how the specificity of your CSS selectors is calculated.<\/p>\n