https://github.com/csstools/postcss-is-pseudo-class

Match elements by inner selectors in CSS
https://github.com/csstools/postcss-is-pseudo-class

Last synced: about 2 months ago
JSON representation

Match elements by inner selectors in CSS

• Host: GitHub
• URL: https://github.com/csstools/postcss-is-pseudo-class
• Owner: csstools
• License: cc0-1.0
• Archived: true
• Created: 2019-11-10T08:35:19.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2022-06-06T05:55:02.000Z (over 2 years ago)
• Last Synced: 2024-04-14T05:31:41.771Z (5 months ago)
• Language: JavaScript
• Size: 12.7 KB
• Stars: 27
• Watchers: 4
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.md

Awesome Lists containing this project

README

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


# PostCSS Is Pseudo Class [](postcss)

[](https://www.npmjs.com/package/postcss-is-pseudo-class)

[](https://img.shields.io/travis/csstools/postcss-is-pseudo-class/master.svg)

[](https://gitter.im/postcss/postcss)

This PostCSS plugin lets you match elements by inner selectors in CSS, following the [Selectors Level 4 specification].

```pcss

: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:

```bash

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

```

Use **PostCSS Is Pseudo Class** to process your CSS:

```js

const postcssIsPseudoClass = require('postcss-is-pseudo-class');

postcssIsPseudoClass.process(YOUR_CSS /*, processOptions, pluginOptions */);

```

Or use it as a [PostCSS] plugin:

```js

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](INSTALL.md#node) | [PostCSS CLI](INSTALL.md#postcss-cli) | [Webpack](INSTALL.md#webpack) | [Create React App](INSTALL.md#create-react-app) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#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.

[PostCSS]: https://github.com/postcss/postcss

[PostCSS Is Pseudo Class]: https://github.com/csstools/postcss-is-pseudo-class

[Selectors Level 4 specification]: https://www.w3.org/TR/selectors-4/#matches