Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

What tool can I use to test the :contains() CSS3 pseudo-class in a browser?

What tool can I use to test the :contains() CSS3 pseudo-class in a browser?

Problem

I am trying to develop CSS Selectors to use with Selenium. In particular I want to use the pseudo-class :contains(). Although the W3 has a draft of CSS3 with :contains() it appears that the final version didn't include it.

I am using Chrome's tools to help me check my CSS selectors and make sure I am doing it right. Chrome doesn't appear to implement :contains(), which is understandable.

Is there a tool that I can use that will allow me to try out selectors that use :contains() on our webpages?

I am using a Mac with Lion. I am also potentially limited to using Firefox 3.5.7 (I was told to hold off on updating for now).

Problem courtesy of: Huliax

Solution

jQuery's selector engine also implements the :contains() pseudo-class. It is to my knowledge that jQuery and Selenium implement it the same way.

I'm not sure how you would be able to test it on sites that don't make use of jQuery, but on sites that do, it's just a matter of firing up your browser's JavaScript console, and running jQuery selectors in the console.

Here's an example with viewing this very Stack Overflow question on Chrome's JavaScript console (you may get different results depending on whether you're logged in or not):

> $("#mainbar div[id]:contains('selector')").get() /* DOM objects with .get() */
[
​…​
​,
​…​
​,
​…​
,
​…​
​]
Solution courtesy of: BoltClock

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

What tool can I use to test the :contains() CSS3 pseudo-class in a browser?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×