Calculating CSS Selector Specificity Using ColdFusion

<cfscript>


	// I roughly calculate the numeric specificity of a CSS selector.
	// CAUTION: This algorithm doesn't know how to take into account
	// character escape sequences.
	function calculateSelectorSpecificity( String selector ){

		// Before we start parsing the selector, we're gonna try to
		// strip out characters that will making pattern matching more
		// difficult.

		// Strip out wild-card matches - these don't contribute to
		// a selector specificity.
		selector = replace( selector, "*", "", "all" );

		// Strip out any quoted values - these will only be in the
		// attribute selectors (and don't contribute to our
		// specificity calculation).
		selector = reReplace( selector, """[^""]*""", "", "all" );
		selector = reReplace( selector, "'[^']*'", "", "all" );

		// Now that we've stripped out the quoted values, let's strip
		// out any content within the attribute selectors.
		selector = reReplace( selector, "\[[^\]]*\]", "[]", "all" );

		// Strip out any special child and descendant selectors as
		// these don't really contribute to specificity.
		selector = reReplace( selector, "[>+~]+", " ", "all" );

		// Strip out any "function calls"; these will be for complex
		// selectors like :not() and :eq(). We're gonna do this in a
		// loop so that we can simplify the replace and handle nested
		// groups of parenthesis.
		while (find( "(", selector )){

			// Strip out the smallest parenthesis.
			selector = reReplace( selector, "\([^)]*\)", "", "all" );

		}

		// Now that we've stripped off any parenthesis, our pseudo-
		// elements and pseudo-classes should all be in a uniform.
		// However, pseudo-elements and pseudo-classes actually have
		// different specifity than each other. To make things simple,
		// let's convert pseudo-classes (which have high specificity)
		// into mock classes.
		selector = reReplace(
			selector,
			":(first-child|last-child|link|visited|hover|active|focus|lang)",
			".pseudo",
			"all"
		);

		// Now that we've removed the pseudo-classes, the only
		// constructs that start with ":" should be the pseudo-
		// elements. Let's replace these with mock elements. Notice
		// that we are injecting a space before the element name.
		selector = reReplace( selector, ":[\w-]+", " pseudo", "all" );

		// Now that we've cleaned up the selector, we can count the
		// number of key elements within the selector.

		// Count the number of ID selectors. These are the selectors
		// with the highest specificity.
		var idCount = arrayLen(
			reMatch( "##[\w-]+", selector )
		);

		// Count the number of classes, attributes, and pseudo-
		// classes. Remember, we converted our pseudo-classes to be
		// mock classes (.pseudo).
		var classCount = arrayLen(
			reMatch( "\.[\w_-]+|\[\]", selector )
		);

		// Count the number of elements and pseudo-elements. Remember,
		// we converted our pseudo-selements to be mock elements
		// (pseudo).
		var elementCount = arrayLen(
			reMatch( "(^|\s)[\w_-]+", selector )
		);

		// Now that we have our count of the various parts of the
		// selector, we can calculate the specificity by concatenating
		// the parts (as strings), and then converting to a number -
		// the number will be the specificity of the selector.
		return(
			fix( idCount & classCount & elementCount )
		);

	}


	// ------------------------------------------------------ //
	// ------------------------------------------------------ //
	// ------------------------------------------------------ //
	// ------------------------------------------------------ //


	// Let's create a collection of selectors with a known specificity
	// so we can test our calculations. These are taking from the
	// Smashing Magazine site:
	// http://coding.smashingmagazine.com/2007/07/27/
	// -> css-specificity-things-you-should-know/
	testCases = [
		{
			selector: "*",
			known: 0
		},
		{
			selector: "li",
			known: 1
		},
		{
			selector: "li:first-line",
			known: 2
		},
		{
			selector: "ul li",
			known: 2
		},
		{
			selector: "ul ol+li",
			known: 3
		},
		{
			selector: "h1 + *[rel=up]",
			known: 11
		},
		{
			selector: "ul ol li.red",
			known: 13
		},
		{
			selector: "li.red.level",
			known: 21
		},
		{
			selector: "div p",
			known: 2
		},
		{
			selector: ".sith",
			known: 10
		},
		{
			selector: "div p.sith",
			known: 12
		},
		{
			selector: "##sith",
			known: 100
		},
		{
			selector: "body ##darkside .sith p",
			known: 112
		}
	];

	// Add a few more test cases. I am making these ones up to test
	// some of the more advanced complex CSS cases.
	arrayAppend(
		testCases,
		[
			{
				selector: "p:has( a[href] )",
				known: 2
			},
			{
				selector: "body##top:lang(fr-ca) div.alert",
				known: 122
			}
		],
		true
	);


	// Let's calculate the specificity.
	for (testCase in testCases){

		// Get and set the calculated specificity.
		testCase.calcualted = calculateSelectorSpecificity(
			testCase.selector
		);

	}

	// Now, output the results of the known vs. claculated values.
	for (testCase in testCases){

		writeOutput( testCase.selector & "<br />" );
		writeOutput( "-- Known: " & testCase.known & "<br />" );
		writeOutput( "-- Calculated: " & testCase.calcualted & "<br />" );
		writeOutput( "<br />" );

	}


</cfscript>