PostCSS Enter Pseudo Class

PostCSS Enter Pseudo Class lets you use the proposed :enter pseudo-class in CSS.

:enter simplifies selectors targeting elements that are “designated”, as in designated with a pointing device, rather than any device.

nav :enter > span {
  background-color: yellow;
}

/* becomes */

nav :hover > span,
nav :focus > span {
  background-color: yellow;
}

From the proposal:

The :enter pseudo-class applies while the user designates an element with a keyboard, pointing device, or other form of input. It matches an element if the element would match :focus or :hover.

Usage

Add PostCSS Enter Pseudo Class to your project:

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

Use PostCSS Enter Pseudo Class to process your CSS:

const postcssPseudoClassEnter = require('postcss-pseudo-class-enter');

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

Or use it as a PostCSS plugin:

const postcss = require('postcss');
const postcssPseudoClassEnter = require('postcss-pseudo-class-enter');

postcss([
  postcssPseudoClassEnter(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);

PostCSS Enter Pseudo Class runs in all Node environments, with special instructions for:

| Node | PostCSS CLI | Webpack | Create React App | Gulp | Grunt | | --- | --- | --- | --- | --- | --- |

Options

prefix

The prefix option determines whether the :enter pseudo-class should use a prefix, and what that prefix will be.

postcssPseudoClassEnter({ prefix: 'x' }); // transforms :-x-enter

outline

Type: String
Default: unset

The outline option determines whether an outline declaration will be added to rules using the :enter pseudo-class. If a string is passed, its value will be used for the outline declaration.

postcssPseudoClassEnter({ outline: true }); // adds outline: 0;

postcssPseudoClassEnter({ outline: 'none' }); // adds outline: none;

Alternatives

Below are some other methods to recreate the effects of :enter.

Use :focus and :hover (supported everywhere)

:focus, :hover { /* ... */ }

Use :matches (supported in Firefox 4+, Chrome 12+, Opera 15+, Safari 5.1+)

:matches(:focus, :hover) { /* ... */ }

Use @custom-selector (supported nowhere yet)

@custom-selector :--enter :focus, :hover;

:--enter { /* ... */ }

Use Sass mixins (requires preprocessing)

@mixin -enter { &:focus, &:hover { @content; } }

@include -enter { /* ... */ }