Need to select second table's second row using CSS selectors

Question

I have an HTML table as below :

<table class="reference notranslate">
  <tr>..</tr>
     .
     .
  <tr>..</tr>
</table>
<table class="reference notranslate">
  <tr>..</tr>
     .
     .
  <tr>..</tr>
</table>
<table class="reference notranslate">
  <tr>..</tr>
     .
     .
  <tr>..</tr>
</table>

I know the XPATH : //table[@class = 'reference notranslate'][2]/tr[2]

I want to select second table's second row. Can any one help how to write the CSS selectors from the same?

Answer 1

"I know the XPATH : //table[@class = 'reference notranslate'][2]/tr[2]

I want to select second table's second row. Can any one help how to write the CSS selectors from the same?"

So, you mean like:

table.reference.notranslate:nth-child(2) tr:nth-child(2)

This selects the second descendant tr element of the second table which has both classes (reference and notranslate).

jsFiddle here.

Answer 2

table.reference:nth-of-type(2) tr:nth-child(2)
{
    background-color:red;
}