javascript - 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)