|
| 1 | +# PostCSS Pseudo-Class Any-Link [![Build Status][ci-img]][ci] |
| 2 | + |
| 3 | +<img align="right" width="135" height="95" src="http://postcss.github.io/postcss/logo-leftp.png" title="Philosopher’s stone, logo of PostCSS"> |
| 4 | + |
| 5 | +[PostCSS Pseudo-Class Any-Link] is a [PostCSS] plugin that allows you to use the proposed [`:any-link`] pseudo-class in CSS. |
| 6 | + |
| 7 | +`:any-link` simplifies selectors targeting links, since the naming of `:link` is misleading; it specifically means unvisited links only, rather than all links. |
| 8 | + |
| 9 | +```css |
| 10 | +/* before */ |
| 11 | + |
| 12 | +nav :any-link > span { |
| 13 | + background-color: yellow; |
| 14 | +} |
| 15 | + |
| 16 | +/* after */ |
| 17 | + |
| 18 | +nav :link > span, |
| 19 | +nav :visited > span { |
| 20 | + background-color: yellow; |
| 21 | +} |
| 22 | +``` |
| 23 | + |
| 24 | +From the [proposal]: |
| 25 | + |
| 26 | +> 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`]. |
| 27 | +
|
| 28 | +## Usage |
| 29 | + |
| 30 | +You just need to follow these two steps to use [PostCSS Pseudo-Class Any-Link]: |
| 31 | + |
| 32 | +1. Add [PostCSS] to your build tool. |
| 33 | +2. Add [PostCSS Pseudo-Class Any-Link] as a PostCSS process. |
| 34 | + |
| 35 | +```sh |
| 36 | +npm install postcss-pseudo-class-any-link --save-dev |
| 37 | +``` |
| 38 | + |
| 39 | +### Node |
| 40 | + |
| 41 | +```js |
| 42 | +postcss([ require('postcss-pseudo-class-any-link')({ /* options */ }) ]) |
| 43 | +``` |
| 44 | + |
| 45 | +### Grunt |
| 46 | + |
| 47 | +Add [Grunt PostCSS] to your build tool: |
| 48 | + |
| 49 | +```sh |
| 50 | +npm install postcss-pseudo-class-any-link --save-dev |
| 51 | +``` |
| 52 | + |
| 53 | +Enable [PostCSS Pseudo-Class Any-Link] within your Gruntfile: |
| 54 | + |
| 55 | +```js |
| 56 | +grunt.loadNpmTasks('grunt-postcss'); |
| 57 | + |
| 58 | +grunt.initConfig({ |
| 59 | + postcss: { |
| 60 | + options: { |
| 61 | + processors: [ |
| 62 | + require('postcss-pseudo-class-any-link')({ /* options */ }) |
| 63 | + ] |
| 64 | + }, |
| 65 | + dist: { |
| 66 | + src: 'css/*.css' |
| 67 | + } |
| 68 | + } |
| 69 | +}); |
| 70 | +``` |
| 71 | + |
| 72 | +### Options |
| 73 | + |
| 74 | +**prefix** (string): prepends a prefix (surrounded by dashes) to the pseudo-class, preventing any clash with native syntax. |
| 75 | + |
| 76 | +```js |
| 77 | +{ |
| 78 | + prefix: 'foo' // pseudo-class becomes :-foo-any-link |
| 79 | +} |
| 80 | +``` |
| 81 | + |
| 82 | +### Alternatives |
| 83 | + |
| 84 | +```css |
| 85 | +/* Using @custom-selector; supported nowhere yet */ |
| 86 | + |
| 87 | +@custom-selector :--any-link :link, :visited; |
| 88 | + |
| 89 | +:--any-link { /* ... */ } |
| 90 | + |
| 91 | +/* Using :matches; supported in Firefox 4+, Chrome 12+, Opera 15+, Safari 5.1+ */ |
| 92 | + |
| 93 | +:matches(:link, :visited) { /* ... */ } |
| 94 | + |
| 95 | +/* Using :link and :visited; supported everywhere */ |
| 96 | + |
| 97 | +:link, :visited { /* ... */ } |
| 98 | +``` |
| 99 | + |
| 100 | +[`:any-link`]: http://http://dev.w3.org/csswg/selectors/#any-link-pseudo |
| 101 | +[`:link`]: http://dev.w3.org/csswg/selectors/#link-pseudo |
| 102 | +[`:visited`]: http://dev.w3.org/csswg/selectors/#visited-pseudo |
| 103 | +[ci]: https://travis-ci.org/jonathantneal/postcss-pseudo-class-any-link |
| 104 | +[ci-img]: https://travis-ci.org/jonathantneal/postcss-pseudo-class-any-link.svg |
| 105 | +[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss |
| 106 | +[PostCSS]: https://github.com/postcss/postcss |
| 107 | +[PostCSS Pseudo-Class Any-Link]: https://github.com/jonathantneal/postcss-pseudo-class-any-link |
| 108 | +[proposal]: http://dev.w3.org/csswg/selectors/ |
0 commit comments