Searching element based on selector

Is there a way after inpecting a page in the browser, I can search based on the cssSelector?

For example, if I’ve the following selector with me cssSelector("tr:nth-child(19) > td:nth-child(2)"), can I search for an element tr:nth-child(19) > td:nth-child(2) ?

manually? if you open the developer console (f12), and at the bottom of the elements window should be a search bar (in most chromium based browsers). That search bar will accept css selectors as search strings.

1 Like

Yeah, manually. Do I just need to search by pastingtr:nth-child(19) > td:nth-child(2) in the search bar and it will take me to that element? I think when I did this , it didn’t find anything.

It works on this sitepoint page.

note that if that phrase is elsewhere in the page’s code (like in javascript or css; the search will look for both the CSS value of the string, as well as the literal string; so if you search for “tr”, and your CSS styles the tr’s, you’ll find that too.), you may need to cycle through results using the up/down arrows on the right of the bar.

It will highlight the element in the elements window; if you then hover over that, it will highlight in the page what element it is referring to (if said element is actually visible)

If the element isnt visible, right click on it, and your browser should give you an option similar to “Scroll into view”, (i’m using Chrome in my example here; it may look different for you depending on browser/os)

example: I have searched for “tr:nth-of-type(4)” on the main forum index here. It has highlighted this. I right click on the blue section.

when i click on “Scroll into view”, the original webpage view scrolls up, and shows the element (Note: my mouse is still over the blue block on the right.):

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.