Javascript find pseudo elements

Question

So I've been work on a CSS selector engine, and I want to support pseudo-elements (::before, ::after, ::selection, ::first-line, etc). I noticed Slick, Sizzle, and some other popular engines seem to support them, but when looking through their code I found no code for it (now granted, I didn't look that hard). Does anyone know how they do it or some way I could do it?

Jolda

Look in the Sizzle source for "filters", "setFilters", etc, and you'll see how they set it up. – Bakery

@Pointy: That appears to be for pseudo-classes, not pseudo-elements. – Jolda

OK then what makes you think that Sizzle supports those? (What would you even do with them via Sizzle, since it's all about finding things and not directly affecting the DOM ??) – Bakery

@Pointy: SlickSpeed. When run using some pseudo-element selectors, it seems to find them fine. Naturally all you would do with Sizzle is find them, but the point is that you could manipulate them once you've found them. – Jolda

Answer 1

Here's a simple way to find them in Webkit using jQuery, can fairly easily be converted to standard JS:

$('*').filter(function(){return getComputedStyle(this, ':before').length != 0});

For Gecko based browsers you need something a little different (haven't tested in IE). Hope this helps

Proprioceptor

Explanation for why "you need something a little different" getComputedStyle(this, ':before').length is always non-zero in Firefox 6 (it seems to like the value 185 and I haven't tried to work out why). – Ofris

Gecko and Webkit browsers output different results for getComputedStyle - Gecko outputs the default browser styles, webkit only outputs if the element has been styled - if it's been referenced in CSS. You need to create a blank element with no styling, then compare that style object to getComputedStyle(this, ':before') instead of testing the length - or possibly test the "content" property of the pseudo element. – Proprioceptor

I like this. I'm probably not going to end up implementing these in my selector engine after all, but if I decide to, this looks like a decent way (though with some cross-browser issues). – Jolda

This is a hell of approach for the problem I am having. If you need apply CSS to a random class based pseudo element (like .focus:before) and the element within has an Id this might be the only solution you would reach. Thanks! – Bedbug