CODEWITHSUNDEEP
htmlcsscss-selectors
MillerMedia
MillerMedia

Reputation: 3671

Finding Out Which nth-child an Element Is

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!

Upvotes: 4

Views: 5703

Answers (1)

Blender
Blender

Reputation: 298206

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.

Upvotes: 10

Related Questions