CSS selector to find the first tbody

Question

My HTML code

<div id="myelement">
    <table class="myclass">
       <tbody>
           <tr>
               <td>something</td>
               <td>
                   <table>
                       <tbody>
                         <tr> hari </tr>
                       </tbody>
                   </table>
               </td>
           </tr>
           <tr>
              foo
           </tr>
       </tbody>
    </table>
</div>

Xpath solution

"//tbody[1]"

Problem

I am looking for a CSS expression which should select first tbody which is a direct child of table, not the one inside tr.

If I use the CSS as tbody, then it would select 2, but I am looking for a way to fix it here. I know table>tbody will work, I am looking for if any more is there or not. As in my case I can't use table>tbody.

Answer 1

 tbody tr td:first-of-type {
     color: red;
 }

DEMO

td:first-of-type will works too.

---

:nth-of-type(1) and :first-of-type are the same. Docs

Answer 2

Try using the immediate child selector >:

.myclass > tbody

Or if you just want the first one inside that div, you can do:

#myelement:first-child tbody