jQuery selector problem

Question

I have this selector:

$("table.details tbody tr:not(.details)")

But I'm wondering why this inner table gets selected too:

<table class="items details">
    <thead>
        <tr>
            <th style="width: 90%;">Test application</th>
            <th style="width: 10%;">Sent to test</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>6456</td>
            <td>8/29/2009</td>
        </tr>
        <tr class="details">
            <td colspan="2">
                <table>
                    <tr>
                        <td style="width: 100px;">Description:</td>
                        <td>2312313</td>
                    </tr>
                    <tr>
                        <td colspan="2"></td>
                    </tr>
                    <tr>
                        <td>Test URL Test</td>
                        <td><a href="Test2" title="Visit test application">Test2</a></td>
                    </tr>     
                </table>
            </td>
        </tr>
    </tbody>
</table>

A .length property returns 6, which is the number of in total.

But WHY?

Answer 1

You selector is selecting all descendents. To select the immediate children, use this:

$("table.details > tbody > tr:not(.details)")

This section in the jQuery docs will help more: http://docs.jquery.com/Selectors