Question

Here’s my problem: I’m writing a WordPress plugin that helps budding CSS authors see how css applies to their theme in real time. It’s got a numer of nifty features, except one, which is pretty crucial in my mind.

I want to allow them to click an element, see the full selector path to that element (that part is done), and then show them which styles in their stylesheet apply to it.

I have the full selector path to the element (html body div#page div#post-18.post h2.posttitle, for example), and I have their stylesheet parsed into individual selectors – but I can’t figure out any way to compare the two. Some ideas I’ve had:

1. Use jQuery, and run every selector (in the stylesheet) to see what it returns. I’m not crazy abou tthis because it seems like a huge performance drag to check (potentially thousands) of selectors against the full DOM. On top of that, I’ve then got to compare the jQuery objects to see if they’re pointing at the same thing – and based on what I’ve read about comparing objects, I’m not sure that will be a walk in the park.

2. Write my own, simple comparing function, and compare the full selector path with the css selector. I was pretty sold on this, until I started thinking about the various advanced selectors – : > etc.

3. Use sizzle (or similar), or somehow use jQuery’s implementation of sizzle to just compare the selectors. They’re running these selectors against the DOM, so surely they have the ability to just compare selector strings? Somehow?

I’m stuck. Any help is greatly appreciated.

Answer 1

Checking for equality in that complex structures (like CSS) is extremely difficult (e.g. you cannot determine this by testing for equal result sets, since they could behave entirely different under other circumstances). You might be able to figure this out using browser-specific APIs if they are available in JavaScript (e.g. Firebug displays stylesheets that affect the selected elements). Other than that, your first approach is the only possible one AFAIK.