Use the :any-link pseudo-class in CSS
JavaScript CSS
Latest commit c2ac798 Dec 15, 2016 @jonathantneal 3.0.1
Permalink
Failed to load latest commit information.
test 3.0.0 Dec 6, 2016
.gitignore 3.0.0 Dec 6, 2016
.tape.js 3.0.0 Dec 6, 2016
.travis.yml 3.0.0 Dec 6, 2016
CHANGELOG.md 3.0.1 Dec 14, 2016
CONTRIBUTING.md 3.0.0 Dec 6, 2016
LICENSE.md 3.0.0 Dec 6, 2016
README.md 3.0.0 Dec 6, 2016
index.js 3.0.1 Dec 14, 2016
package.json 3.0.1 Dec 14, 2016

README.md

:any-link PostCSS Logo

NPM Version Build Status Licensing Changelog Gitter Chat

: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.

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

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
}

Usage

Add :any-link to your build tool:

npm install :any-link --save-dev

Node

require(':any-link').process(YOUR_CSS, { /* options */ });

PostCSS

Add PostCSS to your build tool:

npm install postcss --save-dev

Load :any-link as a PostCSS plugin:

postcss([
    require(':any-link')({ /* options */ })
]).process(YOUR_CSS, /* options */);

Gulp

Add Gulp PostCSS to your build tool:

npm install gulp-postcss --save-dev

Enable :any-link within your Gulpfile:

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

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

Grunt

Add Grunt PostCSS to your build tool:

npm install grunt-postcss --save-dev

Enable :any-link within your Gruntfile:

grunt.loadNpmTasks('grunt-postcss');

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