⚠️ This package has been discontinued but a new version was made and is being maintained here at @csstools/postcss-plugins. ⚠️

PostCSS Is Pseudo Class

This PostCSS 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;
}

Usage

Add PostCSS Is Pseudo Class to your project:

npm install postcss-is-pseudo-class --save-dev

Use 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

Limitations

:is selectors with complex inner selectors are ignored.
Selector weight is not normalized to the specificity of its most specific argument.

These are welcome PR opportunities.

csstools/postcss-is-pseudo-class

PostCSS Is Pseudo Class

Usage

Limitations