init

assets/css/main.css

@@ -0,0 +1,74 @@
+body {font-family: Arial, "MS Trebuchet", sans-serif; font-size:.8em;}
+
+section {float:right; width:68%; border:1px solid #000;}
+
+pre {margin:0;}
+
+aside {position:fixed;top:0; width:28%;}
+
+#showSelector {
+	position:fixed; right:2em; z-index:2; background-color: #fff;
+	border:1px solid green; width:20%; opacity:.8;
+}
+#showSelector:hover{
+	opacity: 1;
+		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+    	filter: alpha(opacity=1000);
+}
+
+#browsers {
+	display:none;
+	height:auto;
+}
+
+#browsers b{
+	display: block;
+	margin-bottom:.5em;
+}
+#browsers span {
+	width:33px;  display:inline-block;
+	position:relative;  text-align:center;
+}
+
+
+.syntax  {
+	color: navy;
+    font-weight: bolder;
+    font-family:'Courier New';
+    background-color: yellow;
+}
+.current { text-decoration:none; font-weight:bold; color:#000;}
+label{display:inline-block; width:46%;}
+
+
+#content{
+	margin:0 auto; position:relative;
+}
+
+li label {margin:0 .5em;}
+
+#reference { margin:1em 0; display: block;}
+
+#introDesc label {width:auto;}
+
+h1 {margin:0;}
+
+nav a:hover{color:#000; font-weight:bold;}
+
+#tips {
+	background-color:#FCFFCC;
+}
+#introDesc {
+	background-color: #F9F9F9;
+}
+.text {padding:.8em;}
+
+
+
+#selectors li:hover{
+	background-color: yellow;
+}
+
+#resources{background-color: #E1F2EC; margin-top:1em;}
+
+

assets/css/style.css

@@ -0,0 +1,151 @@
+/*--- #1: Universal */
+* p {	
+	text-transform: uppercase;
+}
+
+/*--- #2 - ID */
+#bravo{
+	letter-spacing:2em; 
+}
+
+/*--- #3 - Class */
+.charlie{
+	background-color: #FFEF14; padding:.2em;
+}
+
+/*--- #4 - Descendant */
+nav a{
+	font-size:2em; color:red;
+}
+
+/*--- #5 - Type */
+img {
+	width:10%;
+}
+
+/*--- #6 - Pseudo-class */
+a:visited{
+	padding: 2em;
+}
+
+/*--- #7 - Adjacent sibling */
+li + li{
+	border:1px solid green; padding:.2em;
+}
+
+/*--- #8 - Child  */
+div > span{
+	font-weight:bolder;
+}
+
+/*--- #9 - General sibling */
+p ~ p {
+	font-size:1.5em; color:purple; display:inline-block;
+}
+
+/*--- #10 - Attribute  */
+a[title] {
+	font-style: italic;
+}
+
+/*--- #11 - Attribute (equals)*/
+a[title='CSS Reference']{
+	color:green; font-size:3em; padding:0;
+}
+
+/*--- #12 - Attribute (contains) */
+a[href*='#']{
+	background-color: #C759D1;
+}
+
+/*--- #13 - Attribute (prefix) */
+a[href^='http']{
+	border:3px dotted orange;
+}
+
+/*--- #14 - Attribute (suffix) */
+input[id$='a']{
+	border-style:ridge; border-width: 1em;
+}
+
+/*--- #15 - Data attribute */
+*[data-customtag='a']{
+	line-height:2em; letter-spacing:.3em;
+}
+
+/*--- #16 - Whitespace-separated list of words */
+input[class~='tango']{
+	font-size:2em; 
+}
+
+/*--- #17 - Checked */
+input:checked{
+	margin-left:1em;
+}
+
+/*--- #18 - After */
+span:after{
+	content:    "Text added via CSS!"; 
+	font-size:  .8em; padding-left:1em;
+	color:blue;
+}
+
+/*--- #19 - Hover */
+li:hover {
+	background-color:green;
+}
+
+/*--- #20 - Not */
+b:not(.xray){
+	background-color: #DDD; padding:.2em;
+}
+
+/*--- 21 - Psuedo element */
+p::first-letter{
+	font-size:1.5em;
+}
+
+/*--- 22 - nth-Child */
+span:nth-child(2n+1) {
+	color:lime;
+}
+
+/*--- 23 - nth-last-child */
+li:nth-last-child(2){
+	border-bottom:1px ridge blue;
+}
+
+/*---24 - nth-of-type */
+input:nth-of-type(3) {  
+   margin:3em;
+} 
+
+/*---25 - nth-of-type */
+span:nth-last-of-type(1) {  
+   text-transform:uppercase;
+} 
+
+/*---26 - First-child */
+p:first-child {  
+   text-indent: 3em;
+}
+
+/*---27 - Last-child */
+h2:last-child {  
+   text-indent: 6em;
+}
+
+/*---28 - Last-child */
+h2 i:only-child {  
+   border:1px solid red;
+}
+
+/*---29 - Only-of-type */
+em:only-of-type {
+	line-height:3em;
+}
+
+/*---30 - First-of-type */
+form input:first-of-type {
+	text-decoration: line-through;
+}

assets/js/selectors.js

@@ -0,0 +1,54 @@
+var SyntaxHighlighter = SyntaxHighlighter;
+$(function() {
+    'use strict';
+    var $nav = $('#selectors a'),
+        check = '✓';
+    SyntaxHighlighter.all();
+
+    function highlight(lineNum) {
+        $('.line').removeClass('highlighted');
+        $.each(lineNum, function(i) {
+            $('.number' + lineNum[i]).addClass('highlighted');
+        });
+        return;
+    }
+
+    function selector(selection, src, desc) {
+        $('#selectorChoosen').text(selection);
+        $('#reference').text(src).attr('href', src);
+        $('#cssDesc').text(desc);
+        return;
+    }
+
+    function browserSupport(browser){
+        browser = browser.replace(/y/g, check);
+        browser = browser.split(",");
+
+        $('#ch').html(browser[0]);
+        $('#ff').html(browser[1]);
+        $('#op').html(browser[2]);
+        $('#sa').html(browser[3]);
+        $('#ie').html(browser[4]);
+        return;
+    }
+
+    $nav.click(function(e) {
+        var $this = $(this), 
+            className = 'current',
+            $browser = $('#browsers');
+        e.preventDefault();
+
+        $nav.removeClass(className);
+        $this.addClass(className);
+
+        highlight($this.data('line').split(','));
+        selector($this.data('css'), $this.attr('href'), $this.data('desc'));
+
+        browserSupport($this.data('support'));
+
+        if( $browser.css('display') === 'none'){
+            $browser.show();
+        }
+
+    });
+});

assets/syntaxHighlighter/shBrushCss.js

@@ -0,0 +1,91 @@
+/**
+ * SyntaxHighlighter
+ * http://alexgorbatchev.com/SyntaxHighlighter
+ *
+ * SyntaxHighlighter is donationware. If you are using it, please donate.
+ * http://alexgorbatchev.com/SyntaxHighlighter/donate.html
+ *
+ * @version
+ * 3.0.83 (July 02 2010)
+ * 
+ * @copyright
+ * Copyright (C) 2004-2010 Alex Gorbatchev.
+ *
+ * @license
+ * Dual licensed under the MIT and GPL licenses.
+ */
+;(function()
+{
+	// CommonJS
+	typeof(require) != 'undefined' ? SyntaxHighlighter = require('shCore').SyntaxHighlighter : null;
+
+	function Brush()
+	{
+		function getKeywordsCSS(str)
+		{
+			return '\\b([a-z_]|)' + str.replace(/ /g, '(?=:)\\b|\\b([a-z_\\*]|\\*|)') + '(?=:)\\b';
+		};
+
+		function getValuesCSS(str)
+		{
+			return '\\b' + str.replace(/ /g, '(?!-)(?!:)\\b|\\b()') + '\:\\b';
+		};
+
+		var keywords =	'ascent azimuth background-attachment background-color background-image background-position ' +
+						'background-repeat background baseline bbox border-collapse border-color border-spacing border-style border-top ' +
+						'border-right border-bottom border-left border-top-color border-right-color border-bottom-color border-left-color ' +
+						'border-top-style border-right-style border-bottom-style border-left-style border-top-width border-right-width ' +
+						'border-bottom-width border-left-width border-width border bottom cap-height caption-side centerline clear clip color ' +
+						'content counter-increment counter-reset cue-after cue-before cue cursor definition-src descent direction display ' +
+						'elevation empty-cells float font-size-adjust font-family font-size font-stretch font-style font-variant font-weight font ' +
+						'height left letter-spacing line-height list-style-image list-style-position list-style-type list-style margin-top ' +
+						'margin-right margin-bottom margin-left margin marker-offset marks mathline max-height max-width min-height min-width orphans ' +
+						'outline-color outline-style outline-width outline overflow padding-top padding-right padding-bottom padding-left padding page ' +
+						'page-break-after page-break-before page-break-inside pause pause-after pause-before pitch pitch-range play-during position ' +
+						'quotes right richness size slope src speak-header speak-numeral speak-punctuation speak speech-rate stemh stemv stress ' +
+						'table-layout text-align top text-decoration text-indent text-shadow text-transform unicode-bidi unicode-range units-per-em ' +
+						'vertical-align visibility voice-family volume white-space widows width widths word-spacing x-height z-index';
+
+		var values =	'above absolute all always aqua armenian attr aural auto avoid baseline behind below bidi-override black blink block blue bold bolder '+
+						'both bottom braille capitalize caption center center-left center-right circle close-quote code collapse compact condensed '+
+						'continuous counter counters crop cross crosshair cursive dashed decimal decimal-leading-zero default digits disc dotted double '+
+						'embed embossed e-resize expanded extra-condensed extra-expanded fantasy far-left far-right fast faster fixed format fuchsia '+
+						'gray green groove handheld hebrew help hidden hide high higher icon inline-table inline inset inside invert italic '+
+						'justify landscape large larger left-side left leftwards level lighter lime line-through list-item local loud lower-alpha '+
+						'lowercase lower-greek lower-latin lower-roman lower low ltr marker maroon medium message-box middle mix move narrower '+
+						'navy ne-resize no-close-quote none no-open-quote no-repeat normal nowrap n-resize nw-resize oblique olive once open-quote outset '+
+						'outside overline pointer portrait pre print projection purple red relative repeat repeat-x repeat-y rgb ridge right right-side '+
+						'rightwards rtl run-in screen scroll semi-condensed semi-expanded separate se-resize show silent silver slower slow '+
+						'small small-caps small-caption smaller soft solid speech spell-out square s-resize static status-bar sub super sw-resize '+
+						'table-caption table-cell table-column table-column-group table-footer-group table-header-group table-row table-row-group teal '+
+						'text-bottom text-top thick thin top transparent tty tv ultra-condensed ultra-expanded underline upper-alpha uppercase upper-latin '+
+						'upper-roman url visible wait white wider w-resize x-fast x-high x-large x-loud x-low x-slow x-small x-soft xx-large xx-small yellow';
+
+		var fonts =		'[mM]onospace [tT]ahoma [vV]erdana [aA]rial [hH]elvetica [sS]ans-serif [sS]erif [cC]ourier mono sans serif';
+
+		this.regexList = [
+			{ regex: SyntaxHighlighter.regexLib.multiLineCComments,		css: 'comments' },	// multiline comments
+			{ regex: SyntaxHighlighter.regexLib.doubleQuotedString,		css: 'string' },	// double quoted strings
+			{ regex: SyntaxHighlighter.regexLib.singleQuotedString,		css: 'string' },	// single quoted strings
+			{ regex: /\#[a-fA-F0-9]{3,6}/g,								css: 'value' },		// html colors
+			{ regex: /(-?\d+)(\.\d+)?(px|em|pt|\:|\%|)/g,				css: 'value' },		// sizes
+			{ regex: /!important/g,										css: 'color3' },	// !important
+			{ regex: new RegExp(getKeywordsCSS(keywords), 'gm'),		css: 'keyword' },	// keywords
+			{ regex: new RegExp(getValuesCSS(values), 'g'),				css: 'value' },		// values
+			{ regex: new RegExp(this.getKeywords(fonts), 'g'),			css: 'color1' }		// fonts
+			];
+
+		this.forHtmlScript({ 
+			left: /(&lt;|<)\s*style.*?(&gt;|>)/gi, 
+			right: /(&lt;|<)\/\s*style\s*(&gt;|>)/gi 
+			});
+	};
+
+	Brush.prototype	= new SyntaxHighlighter.Highlighter();
+	Brush.aliases	= ['css'];
+
+	SyntaxHighlighter.brushes.CSS = Brush;
+
+	// CommonJS
+	typeof(exports) != 'undefined' ? exports.Brush = Brush : null;
+})();