NTH Everything

A example of NTH

HTML

<h1><p id="nthEverthing">nth-Everthing</p></h1>
<p id="letters">Hovera<b>red</b>letter. Cool, hu?</p>
<p id="crazy">Flip Hover Flip</p>
<p id="word">FirstWord some words Green some words LastWord</p>
<p id="firstLastWord">Hello from <a href="http://www.bybe.net/" rel="nofollow">bybe</a></p>

CSS

body{font-family:Helvetica, sans-serif;font-size:50px;text-align:center;background:#5D2971;color:#290238;}
h1{padding:0 20px;}
p{padding:0 5px;}
h1{font-size:60px;}
#nthEverthing:nth-letter(odd),#nthEverthing:nth-letter(even){display:inline-block;text-transform:uppercase;width:80px;width:80px;}
#nthEverthing:nth-letter(even){transform:scale(1) skewY(-15deg);background:#7A4A8D;}
#nthEverthing:nth-letter(odd){transform:scale(1) skewY(15deg);background:#9A73A9;}
#letters:nth-letter(even),#letters:nth-letter(odd){transition:all .4s;}
#letters:nth-letter(odd):hover,#letters:nth-letter(even){color:#9A73A9;}
#letters:nth-letter(odd){color:#7A4A8D;}
#letters:nth-letter(even):hover{color:#421155;}
#pseudo:nth-letter(1):before,#pseudo:nth-letter(1):after{content:'_'}
#click:nth-word(2):before{content:'>> ';}
#click:nth-word(2):after{content:'<< '}
#click:nth-word(2):hover:before{content:'>>>> ';}
#click:nth-word(2):hover:after{content:'<<<< '}
#flip:nth-letter(2n){display:inline-block;margin:10px 10px;-webkit-transform: rotateY(180deg);}
#crazy:nth-letter(2n1){display:inline-block;margin:10px 20px;transition:all .4s;color:#421155;}
#crazy:nth-letter(2n1):hover{transform:rotateZ(180deg);color:#7A4A8D;}
#font:nth-letter(n){font-size:20px;transition:all 1s linear;}
#font:nth-letter(n):hover{font-size:30px;}
#word:first-word{color:#9A73A9;}
#word:nth-word(4){color:#7A4A8D;}
p#word:last-word{color:#421155;}
#firstLastWord:first-word{font-size:25px;color:#290238;}
#firstLastWord:last-word{color:#290238;transition:rotate 1s;}
#firstLastWord:last-word{display:inline-block;transform:rotateZ(180deg);}

JavaScript

/*! jquery.nthEverything - v0.1 - 2012-12-15
 *  https://github.com/FWeinb/nthEverything
 *  Copyright (c) 2012 Fabrice Weinberg (http://fabrice.weinberg.me/)
 */
(function(e){e.fn.nthEverything=function(){var t="-nthEvery",n=/\s*(.*?)\s*\{(.*?)\}/g,r=/\s*(?!<\")\/\*[^\*]+\*\/(?!\")\s*/gm,i=/([^:]+)/g,s=/(\w*)-(\w*)(\((even|odd|[\+-n\d]{1,6})\))?/,o=/(\s*[^ ]+\s*)/g,u=/\s+/,a,f={},l="",c=function(e,t,n,r,i){var s=0,o=+e,u,a,f,l,c,h,p=-1;e==="odd"||e==="even"?(o=e==="odd"?1:2,s=2):/^\d+$/.test(e)?(o=e-i,s=0):(f=/^(\+|-)?\d+/.exec(e),l=/(\+|-)?\d+$/.exec(e),o=l?+l[0]:1,s=f?+f[0]:1,c=f?f.length-1:0,h=l?l.length:0,e.substr(c,e.length-h-c).charAt(0)==="-"&&(s*=-1)),o--;for(a=o;a<r;a+=s){if(a<0||a===p)break;n[a]===undefined?n[a]=t:n[a]+=" "+t,p=a}},h=function(e,t){return'<span class="'+e+'">'+t+"</span>"},p=function(e,t){var n="",r,i;for(r=0;r<e.length;r++)i=e[r],i===undefined?n+=t[r]:n+=h(i,t[r]);return n},d=function(e,t,n){var r=new Array(t),i;for(i=0;i<e.period.length;i++)c(n(e.period[i],t),e.className[i],r,t);return r},v={word:function(e){return e.match(o)},letter:function(e){return e.split("")}},m={first:{word:function(e){return e==="firstword"&&(e="1"),e}},last:{word:function(e,t,n){return e==="lastword"&&(e=""+t.match(o).length),e}},nth:{letter:function(e){return e},word:function(e){return e}}},g=function(t,n,r){var i=r.func,s,o,u,f,l,h;return t.each(function(){if(this.nodeType===1)g(e(this).contents(),n,r);else if(this.nodeType===3){s=v[i](this.nodeValue),o=s.length,u=new Array(o);for(var t=0;t<r.period.length;t++)f=r.className[t],l=r.cat[t],h=r.period[t],c(m[l][i](h,n,o),f,u,o,a);e(this).replaceWith(p(u,s)),a+=o}}),a},y=function(e){var...