postcss-pseudo-class-enter

PostCSS Pseudo-Class Enter

PostCSS Pseudo-Class Enter is a PostCSS plugin that allows you to use the proposed :enter pseudo-class in CSS.

:enter simplifies selectors targeting elements that are designated, as the naming of :hover is somewhat misleading; it specifically means elements designated with a pointing device, rather than any device.

/* before */

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

/* after */

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

You just need to follow these two steps to use PostCSS Pseudo-Class Enter:

1. Add PostCSS to your build tool.
2. Add PostCSS Pseudo-Class Enter as a PostCSS process.

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

Node

postcss([ require('postcss-pseudo-class-enter')({ /* options */ }) ])

Grunt

Install Grunt PostCSS:

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

Enable PostCSS Pseudo-Class Enter within your Gruntfile:

grunt.loadNpmTasks('grunt-postcss');

grunt.initConfig({
	postcss: {
		options: {
			processors: [
				require('postcss-pseudo-class-enter')({ /* options */ })
			]
		},
		dist: {
			src: 'css/*.css'
		}
	}
});

Options

prefix (string): prepends a prefix (surrounded by dashes) to the pseudo-class, preventing any clash with native syntax.

{
	prefix: 'foo' // pseudo-class becomes :-foo-enter
}

Alternatives

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

Use @custom-selector (supported nowhere yet)

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

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

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

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

Use :focus and :hover (supported everywhere)

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

Use Sass mixins (requires preprocessing)

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

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

Changelog

0.3.0 (June 16, 2015)

• Added: Support for complex uses
• Added: Code documentation
• Changed: Coding conventions