Home/ Questions/Q 9278189
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T17:18:14+00:00

I am editing the CSS of a static framework for an e-commerce store. I

  • 0

I am editing the CSS of a static framework for an e-commerce store. I can’t edit a lot of it but I’ve been using nth-child to target certain elements in the CSS. The problem is that a lot of the dynamically generated divs, tables and spans don’t have class or ID selectors. The framework is built on tables so there’s a lot of CSS selectors like this:

.sample_CSS_class table:nth-child(5) table

This is where a table that’s contained within the fifth table under the div with the class “sample_CSS_class” is targeted. This can take a lot of time though. I have to go into the Google Chrome Inspector (or Firebug) and expand the source code and then count down from there. With so much code, I can make mistakes and it also just takes a while.

I was wondering if anyone knows an efficient way to find out the nth-child number of an element with something like Firebug or Google Chrome Inspector (or any other tool that’s out there). Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    With Chrome, you can use the Copy XPath context menu entry to sort of do it:

    XPath stuff

    It’ll give you an XPath selector that looks like this:

    //*[@id="sidebar"]/div[4]/div/div[13]

    div[13] is like div:nth-child(13). It’d be really nice if Chrome had a Copy CSS option, but for some reason it doesn’t. Maybe someone will make an extension.

    • 0