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