This :is() plugin lets you match elements by inner selectors in CSS, following the Selectors Level 4 specification.
:is(article, section) > :is(h1, h2, h3, h4, h5, h6):is(:hover, :focus) {
text-decoration: underline;
}
/* becomes */
article > h1:hover, article > h1:focus,
article > h2:hover, article > h2:focus,
article > h3:hover, article > h3:focus,
article > h4:hover, article > h4:focus,
article > h5:hover, article > h5:focus,
article > h6:hover, article > h6:focus,
section > h1:hover, section > h1:focus,
section > h2:hover, section > h2:focus,
section > h3:hover, section > h3:focus,
section > h4:hover, section > h4:focus,
section > h5:hover, section > h5:focus,
section > h6:hover, section > h6:focus {
text-decoration: underline;
}Add PostCSS Is Pseudo Class to your project:
npm install postcss-is-pseudo-class --save-devUse PostCSS Is Pseudo Class to process your CSS:
const postcssIsPseudoClass = require('postcss-is-pseudo-class');
postcssIsPseudoClass.process(YOUR_CSS /*, processOptions, pluginOptions */);Or use it as a PostCSS plugin:
const postcss = require('postcss');
const postcssIsPseudoClass = require('postcss-is-pseudo-class');
postcss([
postcssIsPseudoClass(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);PostCSS Is Pseudo Class runs in all Node environments, with special instructions for:
| Node | PostCSS CLI | Webpack | Create React App | Gulp | Grunt |
|---|
-
:isselectors with complex inner selectors are ignored. - Selector weight is not normalized to the specificity of its most specific argument.
These are welcome PR opportunities.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent