publish: Docs: add a better exemple for custom selectors

generated from commit 9fd680b4664de4a7a52f859476d637d1ea2ed535

Author: MoOx

credits/index.html

@@ -161,7 +161,7 @@
 	</linearGradient>
 	<path fill="url(#SVGID_12_)" d="M255.475,13.569l-4.391,21.613h-0.932l4.373-21.613H255.475z"/>
 </g>
-</svg></span><span class="cssnext-Header-version">1.8.0</span></a><a href="/features/" class="cssnext-Header-nav-item">Features</a><a href="/setup/" class="cssnext-Header-nav-item">Setup</a><a href="/usage/" class="cssnext-Header-nav-item">Usage</a><a href="/playground/" class="cssnext-Header-nav-item">Playground</a></span></div><div class="r-Grid-cell r-minM--2of6"><div class="cssnext-Header-nav"><a href="https://gitter.im/cssnext/cssnext" class="cssnext-Header-nav-item">Support</a><a href="https://github.com/cssnext/cssnext" title="GitHub" class="cssnext-Header-nav-item">GitHub</a><a href="https://twitter.com/cssnext" title="Twitter" class="cssnext-Header-nav-item">Twitter</a></div></div></div></header><header class="cssnext-Jumbotron cssnext-Jumbotron--default cssnext-Jumbotron--credits-html"><div class="r-Grid"><div class="r-Grid-cell"><h1 class="cssnext-Jumbotron-title cssnext-Light">Credits</h1></div></div></header><section class="r-Grid cssnext-Section"><div class="r-Grid-cell js-markdownIt-TOCOriginalContainer"><ul>
+</svg></span><span class="cssnext-Header-version">1.8.1</span></a><a href="/features/" class="cssnext-Header-nav-item">Features</a><a href="/setup/" class="cssnext-Header-nav-item">Setup</a><a href="/usage/" class="cssnext-Header-nav-item">Usage</a><a href="/playground/" class="cssnext-Header-nav-item">Playground</a></span></div><div class="r-Grid-cell r-minM--2of6"><div class="cssnext-Header-nav"><a href="https://gitter.im/cssnext/cssnext" class="cssnext-Header-nav-item">Support</a><a href="https://github.com/cssnext/cssnext" title="GitHub" class="cssnext-Header-nav-item">GitHub</a><a href="https://twitter.com/cssnext" title="Twitter" class="cssnext-Header-nav-item">Twitter</a></div></div></div></header><header class="cssnext-Jumbotron cssnext-Jumbotron--default cssnext-Jumbotron--credits-html"><div class="r-Grid"><div class="r-Grid-cell"><h1 class="cssnext-Jumbotron-title cssnext-Light">Credits</h1></div></div></header><section class="r-Grid cssnext-Section"><div class="r-Grid-cell js-markdownIt-TOCOriginalContainer"><ul>
 <li><a href="https://www.flickr.com/photos/jasoncipriani/11866004734">delorean back</a></li>
 <li><a href="https://www.flickr.com/photos/wizzer/9295055565">delorean with blue trails</a></li>
 <li><a href="https://www.flickr.com/photos/brianneudorff/10047726604">bttf legos</a></li>
@@ -330,5 +330,5 @@
 	</linearGradient>
 	<path fill="url(#SVGID_12_)" d="M255.475,13.569l-4.391,21.613h-0.932l4.373-21.613H255.475z"/>
 </g>
-</svg></span> is brought to you by <a href="https://twitter.com/MoOx">@MoOx</a> &amp; <a href="https://github.com/cssnext/cssnext/graphs/contributors">some other contributors</a>.</p><small><a href="/it-s-cssnext-not-CSSNext">Note: it&#x27;s cssnext, not CSSNext</a><span style="opacity:.4;margin-left:1rem;"><a href="/credits">Credits</a> | <a href="https://github.com/cssnext/cssnext/edit/master/docs/content/credits.md">Edit this page</a></span></small></footer><script src="/index.js?66b1ff6ea5bc40c47f8c"></script><script>
+</svg></span> is brought to you by <a href="https://twitter.com/MoOx">@MoOx</a> &amp; <a href="https://github.com/cssnext/cssnext/graphs/contributors">some other contributors</a>.</p><small><a href="/it-s-cssnext-not-CSSNext">Note: it&#x27;s cssnext, not CSSNext</a><span style="opacity:.4;margin-left:1rem;"><a href="/credits">Credits</a> | <a href="https://github.com/cssnext/cssnext/edit/master/docs/content/credits.md">Edit this page</a></span></small></footer><script src="/index.js?b9d8cee5717168afa1aa"></script><script>
 !function(c,s,S,n,e,x,t){c.GoogleAnalyticsObject=S;c[S]||(c[S]=function(){(c[S].q=c[S].q||[]).push(arguments)});c[S].l=+new Date;x=s.createElement(n);t=s.getElementsByTagName(n)[0];x.src=e;t.parentNode.insertBefore(x,t)}(window,document,'ga','script','//www.google-analytics.com/analytics.js');ga('create','UA-55403963-1','auto');ga('send','pageview');</script></body></html>

faq/index.html

@@ -161,7 +161,7 @@
 	</linearGradient>
 	<path fill="url(#SVGID_12_)" d="M255.475,13.569l-4.391,21.613h-0.932l4.373-21.613H255.475z"/>
 </g>
-</svg></span><span class="cssnext-Header-version">1.8.0</span></a><a href="/features/" class="cssnext-Header-nav-item">Features</a><a href="/setup/" class="cssnext-Header-nav-item">Setup</a><a href="/usage/" class="cssnext-Header-nav-item">Usage</a><a href="/playground/" class="cssnext-Header-nav-item">Playground</a></span></div><div class="r-Grid-cell r-minM--2of6"><div class="cssnext-Header-nav"><a href="https://gitter.im/cssnext/cssnext" class="cssnext-Header-nav-item">Support</a><a href="https://github.com/cssnext/cssnext" title="GitHub" class="cssnext-Header-nav-item">GitHub</a><a href="https://twitter.com/cssnext" title="Twitter" class="cssnext-Header-nav-item">Twitter</a></div></div></div></header><header class="cssnext-Jumbotron cssnext-Jumbotron--default cssnext-Jumbotron--features-html cssnext-Jumbotron--darkRoad"><div class="r-Grid"><div class="r-Grid-cell"><h1 class="cssnext-Jumbotron-title cssnext-Light">cssnext features</h1><strong class="cssnext-Jumbotron-subtitle cssnext-Light">Discover the future of CSS</strong></div></div></header><section class="r-Grid cssnext-Section"><div class="r-Grid-cell js-markdownIt-TOCOriginalContainer"><p>
+</svg></span><span class="cssnext-Header-version">1.8.1</span></a><a href="/features/" class="cssnext-Header-nav-item">Features</a><a href="/setup/" class="cssnext-Header-nav-item">Setup</a><a href="/usage/" class="cssnext-Header-nav-item">Usage</a><a href="/playground/" class="cssnext-Header-nav-item">Playground</a></span></div><div class="r-Grid-cell r-minM--2of6"><div class="cssnext-Header-nav"><a href="https://gitter.im/cssnext/cssnext" class="cssnext-Header-nav-item">Support</a><a href="https://github.com/cssnext/cssnext" title="GitHub" class="cssnext-Header-nav-item">GitHub</a><a href="https://twitter.com/cssnext" title="Twitter" class="cssnext-Header-nav-item">Twitter</a></div></div></div></header><header class="cssnext-Jumbotron cssnext-Jumbotron--default cssnext-Jumbotron--features-html cssnext-Jumbotron--darkRoad"><div class="r-Grid"><div class="r-Grid-cell"><h1 class="cssnext-Jumbotron-title cssnext-Light">cssnext features</h1><strong class="cssnext-Jumbotron-subtitle cssnext-Light">Discover the future of CSS</strong></div></div></header><section class="r-Grid cssnext-Section"><div class="r-Grid-cell js-markdownIt-TOCOriginalContainer"><p>
 <ul class="markdownIt-TOC">
   <li>
     <a href="#automatic-vendor-prefixes">automatic vendor prefixes</a>
@@ -299,12 +299,18 @@ <h2 id="media-queries-ranges"><a class="markdownIt-Anchor" href="#media-queries-
 <h2 id="custom-selectors"><a class="markdownIt-Anchor" href="#custom-selectors">#</a> custom selectors</h2>
 <p>Alows you to create your own selectors</p>
 <pre><code class="language-css"><span class="hljs-at_rule">@<span class="hljs-keyword">custom-selector</span> :--button button, .button</span>;
+<span class="hljs-at_rule">@<span class="hljs-keyword">custom-selector</span> :--enter :hover, :focus</span>;
 
 <span class="hljs-pseudo">:--button</span> <span class="hljs-rules">{
   <span class="hljs-comment">/* styles for your buttons */</span>
 }</span>
-<span class="hljs-pseudo">:--button</span><span class="hljs-pseudo">:hover</span> <span class="hljs-rules">{
-  <span class="hljs-comment">/* hover styles for your button */</span>
+<span class="hljs-pseudo">:--button</span><span class="hljs-pseudo">:--enter</span> <span class="hljs-rules">{
+  <span class="hljs-comment">/*
+    hover/focus styles for your button
+
+    Read more about :enter proposal
+    http://discourse.specifiction.org/t/a-common-pseudo-class-for-hover-and-focus/877
+   */</span>
 }</span></code></pre>
 <p><a href="http://dev.w3.org/csswg/css-extensions/#custom-selectors">Specification</a>
 |
@@ -623,5 +629,5 @@ <h2 id="todo"><a class="markdownIt-Anchor" href="#todo">#</a> @todo</h2>
 	</linearGradient>
 	<path fill="url(#SVGID_12_)" d="M255.475,13.569l-4.391,21.613h-0.932l4.373-21.613H255.475z"/>
 </g>
-</svg></span> is brought to you by <a href="https://twitter.com/MoOx">@MoOx</a> &amp; <a href="https://github.com/cssnext/cssnext/graphs/contributors">some other contributors</a>.</p><small><a href="/it-s-cssnext-not-CSSNext">Note: it&#x27;s cssnext, not CSSNext</a><span style="opacity:.4;margin-left:1rem;"><a href="/credits">Credits</a> | <a href="https://github.com/cssnext/cssnext/edit/master/docs/content/features.md">Edit this page</a></span></small></footer><script src="/index.js?66b1ff6ea5bc40c47f8c"></script><script>
+</svg></span> is brought to you by <a href="https://twitter.com/MoOx">@MoOx</a> &amp; <a href="https://github.com/cssnext/cssnext/graphs/contributors">some other contributors</a>.</p><small><a href="/it-s-cssnext-not-CSSNext">Note: it&#x27;s cssnext, not CSSNext</a><span style="opacity:.4;margin-left:1rem;"><a href="/credits">Credits</a> | <a href="https://github.com/cssnext/cssnext/edit/master/docs/content/features.md">Edit this page</a></span></small></footer><script src="/index.js?b9d8cee5717168afa1aa"></script><script>
 !function(c,s,S,n,e,x,t){c.GoogleAnalyticsObject=S;c[S]||(c[S]=function(){(c[S].q=c[S].q||[]).push(arguments)});c[S].l=+new Date;x=s.createElement(n);t=s.getElementsByTagName(n)[0];x.src=e;t.parentNode.insertBefore(x,t)}(window,document,'ga','script','//www.google-analytics.com/analytics.js');ga('create','UA-55403963-1','auto');ga('send','pageview');</script></body></html>

features/index.html

@@ -161,7 +161,7 @@
 	</linearGradient>
 	<path fill="url(#SVGID_12_)" d="M255.475,13.569l-4.391,21.613h-0.932l4.373-21.613H255.475z"/>
 </g>
-</svg></span><span class="cssnext-Header-version">1.8.0</span></a><a href="/features/" class="cssnext-Header-nav-item">Features</a><a href="/setup/" class="cssnext-Header-nav-item">Setup</a><a href="/usage/" class="cssnext-Header-nav-item">Usage</a><a href="/playground/" class="cssnext-Header-nav-item">Playground</a></span></div><div class="r-Grid-cell r-minM--2of6"><div class="cssnext-Header-nav"><a href="https://gitter.im/cssnext/cssnext" class="cssnext-Header-nav-item">Support</a><a href="https://github.com/cssnext/cssnext" title="GitHub" class="cssnext-Header-nav-item">GitHub</a><a href="https://twitter.com/cssnext" title="Twitter" class="cssnext-Header-nav-item">Twitter</a></div></div></div></header><div class=""><div class="cssnext-Jumbotron cssnext-Jumbotron--default cssnext-Center cssnext-Light">
+</svg></span><span class="cssnext-Header-version">1.8.1</span></a><a href="/features/" class="cssnext-Header-nav-item">Features</a><a href="/setup/" class="cssnext-Header-nav-item">Setup</a><a href="/usage/" class="cssnext-Header-nav-item">Usage</a><a href="/playground/" class="cssnext-Header-nav-item">Playground</a></span></div><div class="r-Grid-cell r-minM--2of6"><div class="cssnext-Header-nav"><a href="https://gitter.im/cssnext/cssnext" class="cssnext-Header-nav-item">Support</a><a href="https://github.com/cssnext/cssnext" title="GitHub" class="cssnext-Header-nav-item">GitHub</a><a href="https://twitter.com/cssnext" title="Twitter" class="cssnext-Header-nav-item">Twitter</a></div></div></div></header><div class=""><div class="cssnext-Jumbotron cssnext-Jumbotron--default cssnext-Center cssnext-Light">
   <section class="r-Grid">
     <div class="r-Grid-cell">
       <strong class="cssnext-Jumbotron-title">Use tomorrow's CSS syntax, today.</strong>
@@ -560,5 +560,5 @@ <h3 class="cssnext-Section-title">Based on NPM ecosystem</h3>
 	</linearGradient>
 	<path fill="url(#SVGID_12_)" d="M255.475,13.569l-4.391,21.613h-0.932l4.373-21.613H255.475z"/>
 </g>
-</svg></span> is brought to you by <a href="https://twitter.com/MoOx">@MoOx</a> &amp; <a href="https://github.com/cssnext/cssnext/graphs/contributors">some other contributors</a>.</p><small><a href="/it-s-cssnext-not-CSSNext">Note: it&#x27;s cssnext, not CSSNext</a><span style="opacity:.4;margin-left:1rem;"><a href="/credits">Credits</a> | <a href="https://github.com/cssnext/cssnext/edit/master/docs/content/index.md">Edit this page</a></span></small></footer><script src="/index.js?66b1ff6ea5bc40c47f8c"></script><script>
+</svg></span> is brought to you by <a href="https://twitter.com/MoOx">@MoOx</a> &amp; <a href="https://github.com/cssnext/cssnext/graphs/contributors">some other contributors</a>.</p><small><a href="/it-s-cssnext-not-CSSNext">Note: it&#x27;s cssnext, not CSSNext</a><span style="opacity:.4;margin-left:1rem;"><a href="/credits">Credits</a> | <a href="https://github.com/cssnext/cssnext/edit/master/docs/content/index.md">Edit this page</a></span></small></footer><script src="/index.js?b9d8cee5717168afa1aa"></script><script>
 !function(c,s,S,n,e,x,t){c.GoogleAnalyticsObject=S;c[S]||(c[S]=function(){(c[S].q=c[S].q||[]).push(arguments)});c[S].l=+new Date;x=s.createElement(n);t=s.getElementsByTagName(n)[0];x.src=e;t.parentNode.insertBefore(x,t)}(window,document,'ga','script','//www.google-analytics.com/analytics.js');ga('create','UA-55403963-1','auto');ga('send','pageview');</script></body></html>

index.html

@@ -161,7 +161,7 @@
 	</linearGradient>
 	<path fill="url(#SVGID_12_)" d="M255.475,13.569l-4.391,21.613h-0.932l4.373-21.613H255.475z"/>
 </g>
-</svg></span><span class="cssnext-Header-version">1.8.0</span></a><a href="/features/" class="cssnext-Header-nav-item">Features</a><a href="/setup/" class="cssnext-Header-nav-item">Setup</a><a href="/usage/" class="cssnext-Header-nav-item">Usage</a><a href="/playground/" class="cssnext-Header-nav-item">Playground</a></span></div><div class="r-Grid-cell r-minM--2of6"><div class="cssnext-Header-nav"><a href="https://gitter.im/cssnext/cssnext" class="cssnext-Header-nav-item">Support</a><a href="https://github.com/cssnext/cssnext" title="GitHub" class="cssnext-Header-nav-item">GitHub</a><a href="https://twitter.com/cssnext" title="Twitter" class="cssnext-Header-nav-item">Twitter</a></div></div></div></header><header class="cssnext-Jumbotron cssnext-Jumbotron--default cssnext-Jumbotron--it-s-cssnext-not-cssnext-html"><div class="r-Grid"><div class="r-Grid-cell"><h1 class="cssnext-Jumbotron-title cssnext-Light">It&#x27;s cssnext, not CSSNext</h1></div></div></header><section class="r-Grid cssnext-Section"><div class="r-Grid-cell js-markdownIt-TOCOriginalContainer"><h2 id="is-it-cssnext-or-cssnext-or-cssnext"><a class="markdownIt-Anchor" href="#is-it-cssnext-or-cssnext-or-cssnext">#</a> Is it cssnext or CSSNext or CSSnext?</h2>
+</svg></span><span class="cssnext-Header-version">1.8.1</span></a><a href="/features/" class="cssnext-Header-nav-item">Features</a><a href="/setup/" class="cssnext-Header-nav-item">Setup</a><a href="/usage/" class="cssnext-Header-nav-item">Usage</a><a href="/playground/" class="cssnext-Header-nav-item">Playground</a></span></div><div class="r-Grid-cell r-minM--2of6"><div class="cssnext-Header-nav"><a href="https://gitter.im/cssnext/cssnext" class="cssnext-Header-nav-item">Support</a><a href="https://github.com/cssnext/cssnext" title="GitHub" class="cssnext-Header-nav-item">GitHub</a><a href="https://twitter.com/cssnext" title="Twitter" class="cssnext-Header-nav-item">Twitter</a></div></div></div></header><header class="cssnext-Jumbotron cssnext-Jumbotron--default cssnext-Jumbotron--it-s-cssnext-not-cssnext-html"><div class="r-Grid"><div class="r-Grid-cell"><h1 class="cssnext-Jumbotron-title cssnext-Light">It&#x27;s cssnext, not CSSNext</h1></div></div></header><section class="r-Grid cssnext-Section"><div class="r-Grid-cell js-markdownIt-TOCOriginalContainer"><h2 id="is-it-cssnext-or-cssnext-or-cssnext"><a class="markdownIt-Anchor" href="#is-it-cssnext-or-cssnext-or-cssnext">#</a> Is it cssnext or CSSNext or CSSnext?</h2>
 <p>The official name is <strong>cssnext</strong>, which should never be capitalized, especially not at the start of a sentence, unless it is being displayed in a location that is customarily all-caps (such as the title of man pages).</p>
 <h3 id="why"><a class="markdownIt-Anchor" href="#why">#</a> Why ?</h3>
 <pre><code class="language-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">nameify</span>(<span class="hljs-params">string</span>) </span>{
@@ -342,5 +342,5 @@ <h3 id="why"><a class="markdownIt-Anchor" href="#why">#</a> Why ?</h3>
 	</linearGradient>
 	<path fill="url(#SVGID_12_)" d="M255.475,13.569l-4.391,21.613h-0.932l4.373-21.613H255.475z"/>
 </g>
-</svg></span> is brought to you by <a href="https://twitter.com/MoOx">@MoOx</a> &amp; <a href="https://github.com/cssnext/cssnext/graphs/contributors">some other contributors</a>.</p><small><a href="/it-s-cssnext-not-CSSNext">Note: it&#x27;s cssnext, not CSSNext</a><span style="opacity:.4;margin-left:1rem;"><a href="/credits">Credits</a> | <a href="https://github.com/cssnext/cssnext/edit/master/docs/content/it-s-cssnext-not-CSSNext.md">Edit this page</a></span></small></footer><script src="/index.js?66b1ff6ea5bc40c47f8c"></script><script>
+</svg></span> is brought to you by <a href="https://twitter.com/MoOx">@MoOx</a> &amp; <a href="https://github.com/cssnext/cssnext/graphs/contributors">some other contributors</a>.</p><small><a href="/it-s-cssnext-not-CSSNext">Note: it&#x27;s cssnext, not CSSNext</a><span style="opacity:.4;margin-left:1rem;"><a href="/credits">Credits</a> | <a href="https://github.com/cssnext/cssnext/edit/master/docs/content/it-s-cssnext-not-CSSNext.md">Edit this page</a></span></small></footer><script src="/index.js?b9d8cee5717168afa1aa"></script><script>
 !function(c,s,S,n,e,x,t){c.GoogleAnalyticsObject=S;c[S]||(c[S]=function(){(c[S].q=c[S].q||[]).push(arguments)});c[S].l=+new Date;x=s.createElement(n);t=s.getElementsByTagName(n)[0];x.src=e;t.parentNode.insertBefore(x,t)}(window,document,'ga','script','//www.google-analytics.com/analytics.js');ga('create','UA-55403963-1','auto');ga('send','pageview');</script></body></html>