Question

If I have a table layout like so:

<table>
  <tr class="one">
    <td>
      ...
    </td>
  </tr>
  <tr class="two">
    <td>
      ...
    </td>
  </tr>
  <tr class="three">
    <td>
      ...
    </td>
  </tr>
  <tr class="four">
    <td>
      ...
    </td>
  </tr>
</table>

What is the easiest way to find the first showing row? I say this as some of the rows classes may have “display: none” set as part of a filtering process.

I thought that:

tr:first-child

Would work but it turns out it doesn’t when hiding rows!

Answer 1

If you can use jQuery it’s simply:

$('tr:visible:first').foo();

You can’t do it without javascript.

If speed is very important to you, this is a bit faster:

$('tr').filter(':visible').first().foo();

Docs:

Because :visible is a jQuery extension and not part of the CSS specification, queries using :visible cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. To achieve the best performance when using :visible to select elements, first select the elements using a pure CSS selector, then use .filter(“:visible”).