{"id":712,"date":"2024-07-26T10:00:08","date_gmt":"2024-07-26T10:00:08","guid":{"rendered":"https:\/\/upprofits.net\/?p=712"},"modified":"2024-11-06T19:08:39","modified_gmt":"2024-11-06T19:08:39","slug":"a-look-into-css-is-selector","status":"publish","type":"post","link":"https:\/\/upprofits.net\/index.php\/2024\/07\/26\/a-look-into-css-is-selector\/","title":{"rendered":"A Look Into: CSS \u201c:is\u201d Selector"},"content":{"rendered":"

The CSS :is<\/code> selector is a handy pseudo-selector that simplifies complex selector queries. It allows you to group multiple selectors into a single, more readable form, which can help reduce redundancy and make your CSS more maintainable.<\/p>\n

Before the :is<\/code> selector, you\u2019d need to repeat the same styles for multiple selectors, leading to long and repetitive code. For example, if you wanted to apply the same styles under the main<\/code> element to the a<\/code> and the button<\/code> elements, you would write:<\/p>\n

\r\nmain a,\r\nmain button {\r\n  color: blue;\r\n}\r\n<\/pre>\n
With the :is<\/code> selector, you can group the selectors into a single line:<\/p>\n
\r\nmain :is(a, button) {\r\n  color: blue;\r\n}\r\n<\/pre>\n
You can also combine it with other pseudo-selector, for example, the :hover<\/code>, which in this example we will make the color to orange.<\/p>\n
\r\nmain :is(a, button):hover {\r\n  color: orange;\r\n}\r\n<\/pre>\n
As you can see, the :is<\/code> selector simplifies the code and makes it easier to read. It\u2019s especially useful when you have a long list of selectors that share the same styles.<\/p>\n
Specificity<\/h4>\n
One important thing to note about the :is<\/code> selector is that it doesn\u2019t affect the specificity of the selector. The specificity of the :is<\/code> selector is the same as the most specific selector within the group. For example, in the following code:<\/p>\n
\r\nmain :is(a, button) {\r\n  color: green;\r\n}\r\n\r\nmain a,\r\nmain button {\r\n  color: red;\r\n}\r\n<\/pre>\n
The specificity of the :is(a, button)<\/code> selector is the same as the a<\/code> selector, which means that if there are conflicting styles, which ever style is defined last will be applied. In this case, we are going to see the color of the button and the anchor will turn red.<\/p>\n
 See the Pen  CSS :is selector<\/a> by HONGKIAT (@hkdc<\/a>)
\n  on CodePen<\/a>.<\/span> <\/p>\n<\/p>\n
But keep in mind that if there\u2019s a more specific selector within the group, the specificity of the :is<\/code> selector will be the same as that selector. For example, in the following code\u2026<\/p>\n
\r\nmain :is(a, .btn) {\r\n  color: green;\r\n}\r\n\r\nmain a,\r\nmain button {\r\n  color: red;\r\n}  \r\n<\/pre>\n
\u2026we have class selector, .button<\/code>, to select the button element so the specificity of the :is(a, .btn)<\/code> selector is the same as the .btn<\/code> selector, which means that the color of both the button and the link will turn green.<\/p>\n
 See the Pen  CSS :is selector<\/a> by HONGKIAT (@hkdc<\/a>)
\n  on CodePen<\/a>.<\/span> <\/p>\n<\/p>\n
Conclusion<\/h4>\n
 The :is<\/code> selector simplifies complex selector queries. It allows you to group multiple selectors into a single, more readable form, which can help reduce redundancy and make your code easier to read. However, keep in mind the specificity of the :is<\/code> selector is the same as the most specific selector within the group, so be careful when using it in your stylesheets.<\/p>\n
Browser Compatibility<\/h4>\n
\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>\nN\/A<\/td>\nN\/A<\/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>\nN\/A<\/td>\nN\/A<\/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<\/div>\n
The post A Look Into: CSS “:is” Selector<\/a> appeared first on Hongkiat<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
The CSS :is selector is a handy pseudo-selector that simplifies complex selector queries. It allows you to group multiple selectors into a single, more readable form, which can help reduce redundancy and make your CSS more maintainable. Before the :is selector, you\u2019d need to repeat the same styles for multiple selectors, leading to long and […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13],"tags":[],"class_list":["post-712","post","type-post","status-publish","format-standard","hentry","category-coding"],"_links":{"self":[{"href":"https:\/\/upprofits.net\/index.php\/wp-json\/wp\/v2\/posts\/712"}],"collection":[{"href":"https:\/\/upprofits.net\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/upprofits.net\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/upprofits.net\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/upprofits.net\/index.php\/wp-json\/wp\/v2\/comments?post=712"}],"version-history":[{"count":1,"href":"https:\/\/upprofits.net\/index.php\/wp-json\/wp\/v2\/posts\/712\/revisions"}],"predecessor-version":[{"id":713,"href":"https:\/\/upprofits.net\/index.php\/wp-json\/wp\/v2\/posts\/712\/revisions\/713"}],"wp:attachment":[{"href":"https:\/\/upprofits.net\/index.php\/wp-json\/wp\/v2\/media?parent=712"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/upprofits.net\/index.php\/wp-json\/wp\/v2\/categories?post=712"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/upprofits.net\/index.php\/wp-json\/wp\/v2\/tags?post=712"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}