CSS rule finder and selector finder given an element.

CSS selector finder

; (function ($) {

	function newSelectorInfo() {
		return {
			hrefs: [],
			selectors: [],
			matched: [],
			skipped: [],
			sortCssText: function () {
				this.matched.sort(function (a, b) {
					if (a.rule.cssText < b.rule.cssText) {
						return 1;
					}
					if (a.rule.cssText > b.rule.cssText) {
						return -1;
					}
					return 0;
				});
				return this;
			},
			toMatchedCss: function () {
				var css = [];
				var matched = this.matched;
				var previousHref = null;

				for (var i = 0, n = matched.length; i < n; i++) {
					var m = matched[i];

					if (previousHref != m.href) {
						previousHref = m.href;
						css.push(
							"/**",
							" * " + m.href,
							" */");
					}

					css.push(m.css);
				}

				return css.join("\n");
			},
			_toTextArea: function ( text ) {

				var html = "<div id=\"find-selectors\" class=\"find-selectors\"><textarea rows=\"16\" cols=\"20\">&nbsp;</textarea></div>";
				var css = [
					"/* find-selector styles */",
					".find-selectors",
					"{",
					"    position:fixed;",
					"    top:0px;",
					"    left:0px;",
					"    box-shadow: 0px 0px 50px #000;",
					"",
					"    border:1px solid #eee;",
					"    border-top-right-radius: 5px;",
					"    border-top-left-radius: 5px;",
					"    -moz-border-radius-topright:5px;",
					"    -moz-border-radius-topleft:5px;",
					"}",
					".find-selectors textarea",
					"{",
					"    border-top-right-radius: 5px;",
					"    border-top-left-radius: 5px;",
					"    -moz-border-radius-topright:5px;",
					"    -moz-border-radius-topleft:5px;",
					"    margin:10px;",
					"}",
				];

				var style = $("#find-selectors-css");

				if (!style.length) {
					$("head:first").append(
						$('<style id="find-selectors-css" type="text/css" rel="stylesheet">').text(css.join("\n")));
				}

				$("#find-selectors").remove();

				var area = $(html);

				$("body:first").append(area);


				area.find("textarea").text([].concat(text).join("\n"))

				return this;
			},
			toTextarea:function() {
				var text = [
					this.toMatchedCss(),
					"/*",
					this.toAllSelectors(),
					"*/"
				];

				return this._toTextArea(text);
			},
			selectCss: function() {
				$("#find-selectors textarea").select();
				return this;
			},
			toAllSelectors:function () {
				var selectors = [];
				var s = this;
				for (var i = 0; i < s.selectors.length; i++) {
					selectors.push(s.selectors[i]);
				}
				return selectors.join("\n");			
			}
		};
	}

	$.fn.findSelectors = function () {

		var s = newSelectorInfo();

		for (var x = 0; x < document.styleSheets.length; x++) {

			var rules = document.styleSheets[x].cssRules;

			for (var i = 0; i < rules.length; i++) {

				var rule = rules[i]
				var selector = rule.selectorText;
				s.selectors.push(selector);

				if (i == 0) {
					var href = rule.parentStyleSheet.href;
					s.hrefs.push(href);
				}

				try {
					if (this.is(selector)) {
						s.matched.push({
							selector: selector,
							href: href,
							rule: rule,
							css: rule.cssText,
							ruleNumber:i,
							styleSheetNumber:x
						});
					}

				} catch (e) {
					s.skipped.push({
						selector: selector,
						href:href,
						exception: e,
						toString: function () {
							return this.selector;
						}
					});
				}
			}
		}

		return s;
	};

	$.matchedSelector = function() {
		var s = $("#wsod_basePop, #wsod_basePop *").andSelf().findSelectors();

		console.log(s.toAllSelectors());

		s.toTextarea().selectCss();
	};

	$.toAllSelectors = function() {
		var ss = document.styleSheets;
		var rules = [];
		for (var i = 0; i < ss.length; i++) {
			var cssRules = ss[i].cssRules;
			for (var j = 0; j < cssRules.length; j++) {
				var r = cssRules[j];
				rules.push(r.selectorText);
			}
		}
		return rules;
	}


	$.toAllStyleSheets = function() {
		var ss = document.styleSheets;
		var sheets = [];
		for (var n = 0; n < ss.length; n++) {
			sheets.push( ss[n].cssRules[0].parentStyleSheet.href );
		}
		return sheets;
	}

})(jQuery);


var all = $.toAllSelectors()
var fs = $("#wsod_basePop").find("*").andSelf().findSelectors();

console.log( all.join("\n") );
console.log( all.length );
console.log( fs );