{"id":72377,"date":"2024-07-26T18:00:08","date_gmt":"2024-07-26T10:00:08","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=72377"},"modified":"2024-07-27T21:53:47","modified_gmt":"2024-07-27T13:53:47","slug":"css-is-selector","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css-is-selector\/","title":{"rendered":"A Look Into: CSS “:is” 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<\/h2>\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