Converting A Single CSS Element Selector To XPath Using 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():

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:

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.

What Other People Are Searching For

[ local search ] convert css to xpath
[ local search ] how to convert css to xpath
[ local search ] translate css selectors to xpath
[ local search ] use css selectors in xpath search in coldfusion

You Might Also Be Interested In: