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, since the naming of :hover is 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

/* Using @custom-selector; supported nowhere yet */

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

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

/* Using :matches; supported in Firefox 4+, Chrome 12+, Opera 15+, Safari 5.1+ */

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

/* Using :focus and :hover; supported everywhere */

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

Changelog

0.1.1 (June 13, 2015)

• Added: Initial release