How to select first child?

Question

How do I select the first div in these divs (the one with id=div1) using first child selectors?

<div class="alldivs">    <div class="onediv" id="div1"> 1 This one </div>    <div class="onediv" id="div2"> 2 </div>    <div class="onediv" id="div3"> 3 </div> </div> 

Answer 1

In plain JavaScript you would use something like:

// Single document.querySelector(".onediv").classList.add("red");   // Multiple (deeply nested) document.querySelectorAll(".onediv:first-child").forEach(EL => EL.classList.add("red")); 

Or by Parent Element using Element.firstElementChild:

// Single Parent  document.querySelector(".alldivs").firstElementChild.classList.add("red");  // Multiple parents document.querySelector(".alldivs").forEach(EL => EL.firstElementChild.classList.add("red")); 

jQuery get first child

Use: $(".onediv").eq(0)

Other examples of selectors and methods targeting the first LI inside an UL:

Syntax	Type	Example
.eq()	Method	$("li").eq(0)
.first()	Method	$("li").first()
:eq()	Selector	$("li:eq(0)")
:first	Selector	$("li:first")
:first-child	Selector	$("li:first-child")
:lt()	Selector	$("li:lt(1)")
:nth-child()	Selector	$("li:nth-child(1)")
.slice()	Method	$("li").slice(0,1)

There are some slight differences in how they operate regarding depth. Play with the below demo examples:

$("select").on("change", function() {   $("li").removeClass("red");   new Function(`return (${this.value})`)(); }).trigger("change");

.red {color: red;} option[disabled] {font-size: 1.4em; color: blue;}

<select>   <option disabled>jQuery examples:</option>    <option>$("li").eq(0).addClass("red")</option>   <option>$("li:eq(0)").addClass("red")</option>   <option>$("li").first().addClass("red")</option>   <option>$("li:first").addClass("red")</option>   <option>$("li:first-child").addClass("red")</option>   <option>$("li:lt(1)").addClass("red")</option>   <option>$("li:nth-child(1)").addClass("red")</option>   <option>$("li").slice(0,1).addClass("red")</option>    <option disabled>JavaScript examples:</option>    <option>document.querySelector("li").classList.add("red")</option>   <option>document.querySelectorAll("li:first-child").forEach(EL => EL.classList.add("red"))</option>    <option disabled>Mixed jQuery + JavaScript</option>    <option>$("li")[0].classList.add("red")</option> </select>  <ul>   <li>1</li>   <li>2     <ul>       <li>2.1</li>       <li>2.2</li>     </ul>   </li>   <li>3</li> </ul>  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>

you can also use [i] to get the JS Element by index out of the jQuery elements collection like eg:

$("li")[0] 

but now that you have the native JS Element representation you have to use JavaScript methods eg:

$("li")[0].classList.add("active"); // Adds class "active" to the first LI in the DOM 

or you can (don't - it's bad design) wrap it back into a jQuery object

$( $("li")[0] ).addClass("active"); // Don't! Use .eq() instead 

Answer 2

$('div.alldivs :first-child'); 

Or you can just refer to the id directly:

$('#div1'); 

As suggested, you might be better of using the child selector:

$('div.alldivs > div:first-child') 

If you dont have to use first-child, you could use :first as also suggested, or $('div.alldivs').children(0).