postcss-pseudo-class-any-link

PostCSS Pseudo-Class Any-Link

PostCSS Pseudo-Class Any-Link is a PostCSS plugin that allows you to use the proposed :any-link pseudo-class in CSS.

:any-link simplifies selectors targeting links, as the naming of :link is misleading; it specifically means unvisited links only, rather than all links.

/* before */

nav :any-link > span {
	background-color: yellow;
}

/* after */

nav :link > span,
nav :visited > span {
	background-color: yellow;
}

From the proposal:

The :any-link pseudo-class represents an element that acts as the source anchor of a hyperlink. It matches an element if the element would match :link or :visited.

Usage

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

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

npm install postcss-pseudo-class-any-link --save-dev

Node

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

Grunt

Add Grunt PostCSS to your build tool:

npm install postcss-pseudo-class-any-link --save-dev

Enable PostCSS Pseudo-Class Any-Link within your Gruntfile:

grunt.loadNpmTasks('grunt-postcss');

grunt.initConfig({
	postcss: {
		options: {
			processors: [
				require('postcss-pseudo-class-any-link')({ /* 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-any-link
}

Alternatives

Here are a few other ways to simulate the effect of PostCSS Pseudo-Class Any-Link.

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

@custom-selector :--any-link :link, :visited;

:--any-link { /* ... */ }

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

:matches(:link, :visited) { /* ... */ }

/* Use :link and :visited; supported everywhere */

:link, :visited { /* ... */ }