Get only the first child element of type in javascript or jquery

I have the following html structure:

    <div class="tab-content">          <div><p>First tab content</p></div>          <div><p>Second tab content</p></div>          <div><p>Third tab content</p><br />              <div class="myvideos">                  <iframe src="http://www.youtube.com/embed/YWD2Z14w99Y"></iframe>              </div>          </div>      </div>  

and am using the following to get all the tab content divs:

$('.tab-content div').hide();  

I want the jQuery function to only get the FIRST child elements inside the "tab-content" 's. CLARIFICATION - I want only the first Child divs one generation down, not their children

ie. Note that the THIRD tab content has a second child div that is being picked up which I want to ignore. I've also tried the following but they don't seem to work:

 $('.tab-content > div').hide();     $('.tab-content div:first-of-type').hide();  

Is there any way to only get the first children divs? This can be with jQuery or Vanilla JS.

https://stackoverflow.com/questions/67029774/get-only-the-first-child-element-of-type-in-javascript-or-jquery April 10, 2021 at 08:32AM