Even though I am going to use this CSS selector in Selenium, this should be generic enough.
I have a page with table of class "list" & it can occur multiple times. I want to find out each occurrence & how many rows each table has. So for this I could use table[class='list'] & will give me all the tables of that class in the page. In this example lets us say it is 3. Now I want to iterate through each of those table, so I tried table[class='list']:nth-child(1) for the first occurrence & table[class='list']:nth-child(2) for second occurrence & so on. I thought that table[class='list']:nth-child(1) would give me the first occurrence but I cannot use the nth-child(n) notation.
If I use table[class='list']:nth-child(odd), I do get all the odd numbered table, but I cannot specifically target a specific table by saying table[class='list']:nth-child(3). It gives me no result back. What am I doing wrong?
BTW, I am using "FireFinder" addon for Firebug to evaluate my CSS selectors on the test page.
Best Answer
table[class='list']:nth-child(1) will match all table elements with a class of list that are the first child of their parent. It has nothing to do with how many elements are matched or what the order of that set is, though if all the tables had the same parent (and that parent had no other children) then your method would work.
You may be able to iterate through the elements returned by table.list some other way, or somehow change your selector the exact details of which would depend on the actual structure of your page.