Socket
Socket
Sign inDemoInstall

@csstools/postcss-is-pseudo-class

Package Overview
Dependencies
Maintainers
0
Versions
26
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@csstools/postcss-is-pseudo-class

A pseudo-class for matching elements in a selector list


Version published
Weekly downloads
3.7M
increased by2.05%
Maintainers
0
Weekly downloads
 
Created

What is @csstools/postcss-is-pseudo-class?

@csstools/postcss-is-pseudo-class is a PostCSS plugin that allows you to use the `:is()` pseudo-class in your CSS. This pseudo-class is useful for simplifying complex selectors by allowing you to group them together.

What are @csstools/postcss-is-pseudo-class's main functionalities?

Simplify Complex Selectors

The `:is()` pseudo-class allows you to simplify complex selectors by grouping them together. In this example, `.foo .baz` and `.bar .baz` are combined into a single rule using `:is(.foo, .bar) .baz`.

/* Input CSS */
:is(.foo, .bar) .baz {
  color: red;
}

/* Output CSS */
.foo .baz,
.bar .baz {
  color: red;
}

Combine Multiple Selectors

You can use the `:is()` pseudo-class to combine multiple selectors into one rule. This example shows how `h1`, `h2`, and `h3` can be grouped together to apply the same styles.

/* Input CSS */
:is(h1, h2, h3) {
  margin: 0;
}

/* Output CSS */
h1,
h2,
h3 {
  margin: 0;
}

Nested Selectors

The `:is()` pseudo-class can be nested to create more complex groupings of selectors. This example demonstrates how `.foo .baz`, `.foo .qux`, `.bar .baz`, and `.bar .qux` can be combined into a single rule.

/* Input CSS */
:is(.foo, .bar) :is(.baz, .qux) {
  color: blue;
}

/* Output CSS */
.foo .baz,
.foo .qux,
.bar .baz,
.bar .qux {
  color: blue;
}

Other packages similar to @csstools/postcss-is-pseudo-class

Keywords

FAQs

Package last updated on 03 Aug 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc