Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
I am the chief technical officer at InVision App, Inc - a prototyping and collaboration platform for designers, built by designers. I also rock out in JavaScript and ColdFusion 24x7.
Meanwhile on Twitter
Loading latest tweet...
Ben Nadel at cf.Objective() 2009 (Minneapolis, MN) with: Ryan Vikander and Kashif Khan

Converting A Single CSS Element Selector To XPath Using ColdFusion

By Ben Nadel on
Tags: ColdFusion

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:

div

... into:

div

Or, converting:

div.form

... 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():

  • <cffunction
  • name="CSSElementSelectorToXPath"
  • access="public"
  • returntype="string"
  • output="false"
  • hint="I convert a single element selector to XPath (ex. div.header).">
  •  
  • <!--- Define arguments. --->
  • <cfargument
  • name="Selector"
  • type="string"
  • required="true"
  • 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(
  • REReplace(
  • ARGUMENTS.Selector,
  • ":[^\s]*",
  • "",
  • "one"
  • )
  • ) />
  •  
  • <!---
  • 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:
  •  
  • element#id
  • element.class
  • #id
  • .class
  • *.class
  • *
  • --->
  • <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 />
  •  
  • <cfelse>
  •  
  • <!--- Not valid - return ANY selector. --->
  • <cfreturn "*" />
  •  
  • </cfif>
  • </cffunction>

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:

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

When the above code, we get the following output:

div ==> div
div#data-form ==> div[ @id = "data-form" ]
div.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.




Reader Comments

Post A Comment

You — Get Out Of My Dreams, Get Into My Comments
Live in the Now
Oops!
Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.