postcss-pseudo-class-any-link

:any-link

:any-link lets 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.

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

/* becomes */

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

Add :any-link to your build tool:

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

Node

Use :any-link to process your CSS:

require('postcss-pseudo-class-any-link').process(YOUR_CSS);

PostCSS

Add PostCSS to your build tool:

npm install postcss --save-dev

Use :any-link as a plugin:

postcss([
	require('postcss-pseudo-class-any-link')()
]).process(YOUR_CSS);

Gulp

Add Gulp PostCSS to your build tool:

npm install gulp-postcss --save-dev

Use :any-link in your Gulpfile:

var postcss = require('gulp-postcss');

gulp.task('css', function () {
	return gulp.src('./src/*.css').pipe(
		postcss([
			require('postcss-pseudo-class-any-link')()
		])
	).pipe(
		gulp.dest('.')
	);
});

Grunt

Add Grunt PostCSS to your build tool:

npm install grunt-postcss --save-dev

Use :any-link in your Gruntfile:

grunt.loadNpmTasks('grunt-postcss');

grunt.initConfig({
	postcss: {
		options: {
			use: [
				require('postcss-pseudo-class-any-link')()
			]
		},
		dist: {
			src: '*.css'
		}
	}
});

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 { /* ... */ }