{ "componentChunkName": "component---src-templates-blog-post-js", "path": "/is-pseudoclass-in-css/", "result": {"data":{"markdownRemark":{"html":"

The CSS :is pseudo-class is useful for writing large selectors in a more compact form.

\n

The :is() function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list.

\n

Below, we have an App component.

\n
import React from "react"\n\nconst App = () => {\n  return (\n    <div className="wrapper">\n      <header>\n        <p>Header</p>\n      </header>\n      <main>\n        <p>Main Content</p>\n      </main>\n      <footer>\n        <p>All Rights Reserved</p>\n      </footer>\n    </div>\n  )\n}\nexport default App
\n

We can style the paragraphs inside the header, main and footer tags as follows:

\n
header p,\nmain p,\nfooter p {\n  font-size: 1.4rem;\n  font-weight: 700;\n  color: gray;\n}
\n

This is the usual approach. However, we can write our selectors in a more compact form using the :is pseudo-class as follows:

\n
/* Selects any paragraph inside a header, main or footer tag. */\n\n:is(header, main, footer) p {\n  font-size: 1.4rem;\n  font-weight: 700;\n  color: gray;\n}
\n","frontmatter":{"title":":is() Pseudo-class in CSS","date":"2021-07-09"}}},"pageContext":{"slug":"/is-pseudoclass-in-css/","prev":{"fields":{"slug":"/react-query-a-guide-to-fetching-data/"},"frontmatter":{"modules":null}},"next":{"fields":{"slug":"/how-to-use-the-javascript-optional-chaining-operator-in-react/"},"frontmatter":{"modules":null}}}}, "staticQueryHashes": ["3159585216"]}