Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there an addon which you can test css selectors in firefox?

I was wondering if there is such an addon in firefox where you can test out css paths to check if they are finding the correct element? I was looking for something similar to xpather for xpath locations.

like image 439
user223871 Avatar asked Feb 05 '10 16:02

user223871


People also ask

How do I test CSS selector in Firefox?

Simply right click and click Inspect Element. This will bring up the CSS selectors for that element.

How a browser determines what elements match a CSS selector?

Browsers match selectors from rightmost (key selector) to left. Browsers filter out elements in the DOM according to the key selector and traverse up its parent elements to determine matches. The shorter the length of the selector chain, the faster the browser can determine if that element matches the selector.


2 Answers

Edit 2019-12-04:

The firefinder addon no longer exists, but you can use the developer console (press F12), and the $$ function to get elements matching a selector, eg. to select all divs: $$('div')

Old answer:

FireFinder does exactly what you are looking for. You can evaluate either CSS, or XPath expressions, it will list the matching elements, and also draw a red border around them.

FireFinder

like image 114
K. Norbert Avatar answered Sep 18 '22 17:09

K. Norbert


Yes you can go for FireBug, a versatile Firefox web development add-on.

Firebug
(source: getfirebug.com)

To test a CSS selector, go to the "Console" tab and enter a command in the bottom form (more info on how to find the command line).

Firebug command line

Inside the command line use the $$("your CSS selector") syntax to test CSS selectors, explained in more detail here. For example use this command to select everything:

$$("body") 
like image 20
Sarfraz Avatar answered Sep 20 '22 17:09

Sarfraz