Skip to main content
Ben Nadel at CFUNITED 2010 (Landsdown, VA) with: Adam Tuttle
Ben Nadel at CFUNITED 2010 (Landsdown, VA) with: Adam Tuttle ( @adamtuttle )

Converting A Single CSS Element Selector To XPath Using ColdFusion

By on

I wanted to explore the idea of converting natural CSS to XPath selectors for use in merging CSS with XHTML content. I don't think the concept is very complicated, but it does seem to have a bunch of little, moving parts. So, rather than solve all the problems at one time, I thought it would be good to break it down and start with the smallest problem first and then build on that to eventually convert natural CSS to XPath.

So, the smallest problem that I can see is converting a single element selector into XPath. For example, converting:


... into:


Or, converting:


... into:

div[ contains( @class, 'form' ) ]

This doesn't get into how these are grouped when it comes to contextual selecting (ex. P within a Div tag) - that's the next level up. Let's tackle the lowest level problem first, then we can worry about how to join these together to perform more complex searches.

When it comes to viable CSS selectors, I think we are dealing with about 6 different possibilties:

  • element#id
  • element.class
  • #id
  • .class
  • *.class
  • *

Thanks to the finite nature of this set, we can easily match these patterns against a simple CFIF / CFELSE statement with regular expressions. And so, I have taken that idea and wrapped it up in a ColdFusion user defined function, CSSElementSelectorToXPath():

	hint="I convert a single element selector to XPath (ex. div.header).">

	<!--- Define arguments. --->
		hint="I am the single element selector."

	<!--- Define the local scope. --->
	<cfset var LOCAL = {} />

		Trim the selector and remove any pseudo selector
		information. While some of these can be applied
		(ex. :event), for our purposes, we are not going to
		apply them at this time.
	<cfset LOCAL.Selector = Trim(
		) />

		Check to see what kind of pattern we have here. As far
		as CSS is concerned, we really only have six different
		selectors to care about:

	<cfif REFind( "^\w+##.+$", LOCAL.Selector )>

		<!--- Return ID selector. --->
		<cfreturn (
			ListFirst( LOCAL.Selector, "##" ) &
			"[ @id = """ &
			ListLast( LOCAL.Selector, "##" ) &
			""" ]"
			) />

	<cfelseif REFind( "^\w+\..+$", LOCAL.Selector )>

		<!--- Return class selector. --->
		<cfreturn (
			ListFirst( LOCAL.Selector, "." ) &
			"[ contains( @class, """ &
			ListLast( LOCAL.Selector, "." ) &
			""" ) ]"
			) />

	<cfelseif REFind( "^##.+$", LOCAL.Selector )>

		<!--- Return ANY ID selector. --->
		<cfreturn (
			"*[ @id = """ &
			ListLast( LOCAL.Selector, "##" ) &
			""" ) ]"
			) />

	<cfelseif REFind( "^\..+$", LOCAL.Selector )>

		<!--- Return ANY class selector. --->
		<cfreturn (
			"*[ contains( @class, """ &
			ListLast( LOCAL.Selector, "." ) &
			""" ) ]"
			) />

	<cfelseif REFind( "^\*\..+$", LOCAL.Selector )>

		<!--- Return ANY class selector. --->
		<cfreturn (
			"*[ contains( @class, """ &
			ListLast( LOCAL.Selector, "." ) &
			""" ) ]"
			) />

	<cfelseif REFind( "^\w+$", LOCAL.Selector )>

		<!--- Return element selector. --->
		<cfreturn LOCAL.Selector />


		<!--- Not valid - return ANY selector. --->
		<cfreturn "*" />


As you can see, I am stripping out any pseudo selectors before the conversion. It is true that some pseudo selectors can be used (ex. :even, :odd, :first), but for now, we'll strip them out. Really, it wouldn't be that hard to put them in; just as with the element selectors, each one would have to be mapped to a specific XPath predicate:

:first ==> [ position() = 1 ]

More on that late. Now, to test to see if the above UDF works, I am gonna run some various CSS selectors through it:


	div ==>
	#CSSElementSelectorToXPath( "div" )#<br />

	div##data-form ==>
	#CSSElementSelectorToXPath( "div##data-form" )#<br /> ==>
	#CSSElementSelectorToXPath( "" )#<br />

	##data-form ==>
	#CSSElementSelectorToXPath( "##data-form" )#<br />

	.data-form ==>
	#CSSElementSelectorToXPath( ".data-form" )#<br />

	*.data-form ==>
	#CSSElementSelectorToXPath( "*.data-form" )#<br />


When the above code, we get the following output:

div ==> div
div#data-form ==> div[ @id = "data-form" ] ==> div[ contains( @class, "data-form" ) ]
#data-form ==> *[ @id = "data-form" ) ]
.data-form ==> *[ contains( @class, "data-form" ) ]
*.data-form ==> *[ contains( @class, "data-form" ) ]

Looks like it's working nice. Next step will be to combine the above and create contextual selectors.

Want to use code from this post? Check out the license.

Reader Comments

I believe in love. I believe in compassion. I believe in human rights. I believe that we can afford to give more of these gifts to the world around us because it costs us nothing to be decent and kind and understanding. And, I want you to know that when you land on this site, you are accepted for who you are, no matter how you identify, what truths you live, or whatever kind of goofy shit makes you feel alive! Rock on with your bad self!
Ben Nadel