Converting A Single CSS Element Selector To XPath Using ColdFusion

Posted March 13, 2009 at 4:09 PM by Ben Nadel

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

There are no comments posted for this web log entry.

Post A Comment

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.

Please review the following issues:

Author Name:
Author Email:
Author Website:
Comment:
Supported HTML tags for formatting: <strong>bold</strong>   <em>italic</em>   <code>code</code>







  • Help Wanted - Find Your Next ColdFusion Job
Ben Nadel's Company - Epicenter Consulting Recent Blog Comments
?????? ????
Jun 20, 2013 at 3:15 AM
A Billion Wicked Thoughts By Ogi Ogas And Sai Gaddam
nice post i love it thanks 4 u :) ... read »
seb
Jun 20, 2013 at 2:32 AM
Working With Inherited Collections In AngularJS
@mike, @ben, The best article about scope and prototypal prototypical inheritance in angularjs is http://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical- ... read »
Josh
Jun 20, 2013 at 2:17 AM
ColdFusion NumberFormat() Exploration
Nice read thanks Ben, Is there a way to mask a negative number? Long story short in the finance sector when you go 'short' on a stock you want the price to fall this is a good thing because you are ... read »
mohsen
Jun 20, 2013 at 1:09 AM
The Beauty Of The jQuery Each() Method
my html code : <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="nss.js"> ... read »
Alesei Narkevitch
Jun 19, 2013 at 11:31 PM
Directive Link, $observe, And $watch Functions Execute Inside An AngularJS Context
@Ben, bunch to learn indeed, but thats fun part : ) ... read »
Burdock-roots
Jun 19, 2013 at 10:41 PM
Referencing ColdFusion Query Columns In A Loop Using Both Array And Dot Notation
Burdock-roots Are you going fat day by day? You need to be good for your family and make some money too. So we bring for you a best product that helps you to be more energetic every day. You will b ... read »
Diego Vilar
Jun 19, 2013 at 9:52 PM
Working With Inherited Collections In AngularJS
I recognize the applicability of your solution, and how easy it makes to share data across multiple views or even "submodules" of rather simple application. But it seems to me that it creat ... read »
Ben Nadel
Jun 19, 2013 at 9:38 PM
Directive Link, $observe, And $watch Functions Execute Inside An AngularJS Context
@Alesei, Glad you like it. Even after working with AngularJS for months, I still get a bunch of unexpected, "$digest is already in progress". So hard to debug sometimes! ... read »
InVision App - Prototyping Made Beautiful With Prototyping Tools