featured image for child selector in JavaScript

How To Use The Child Selector In JavaScript

The child selector is one selector that is rarely used for selecting elements and most especially using the child selector in JavaScript, but I can tell you that the child selector offers a cool feature of selecting a particular element for styling without a class or ID. As we all know, Specificity and last rule are two powerful styling technique in CSS, and the need to style a specific child of a parent may arise at some point in time, the funny thing there is that, if you do not use a class or an ID, you might end up applying the piece of styling or manipulation to the entire children of that parent(not all the time though). So , to use the child selector in css is pretty simple and straight forward. For example, if you have a list item, and you want to select a particular child from the the list using css, you can achieve it with this simple code;

HTML CODE

<div class=”nav”>

<ul>

<li>Element 1</li>

</ul>

<ul>

<li> Element 2 </li>

<li>first Element 2.1</li>

<li>second Element 2.2</li>

<li>third Element 2.3</li>

<li>fourth Element 2.4</li>

</ul>

<ul>

<li>Element 3</li>

</ul>

<ul>

<li>Element 4 </li>

<li>first Element 4.1</li>

<li>second Element 4.2</li>

<li>third Element 4.3</li>

<li>fourth Element 4.4</li>

</ul>

</div>

Using CSS to target a child element for selection

.nav ul:nth-child(4) {

  color: pink;

}

/* the first code will target all the children of the fourth ul */

.nav ul:nth-child(4) li:nth-child(2) {

  color: orange;

}

And the second child will be selected and the stylings specified will be applied

The only limitation of using CSS is that, you can not manipulate it like you will do when using JavaScript. Hence, you need to know how to do to target a child element using child selector in JavaScript as well.

JavaScript child selector illustration

since the elements have been created in html, we can the define our target, this time, our target is how to get the third li element of the second UL list

– element 1, element 2, element 3, element 4.

somehow somehow, your JavaScript code may appear like this

const target = document.querySelector(“li”);

this code will only return the first match of li, and if you specify any styling,like color with the code

const target = document.querySelector(“li”);

target.style.color = “white”;

it will be applied to the first match only and your output will be

child selector in javascript failed

Using  querySelectorAll returns all the li as a node list, for example

const target = document.querySelectorAll(“li”);

and when you try to specify a color, like this ,

target.style.color  =  “white”

it will flag an error, this may make you use a foreach array method like this

target.forEach(function(item){

item.style.color = “white”

})

This will not produce the expected result either, and instead, it applied the specified styling to all the li element as shown below

Since the code we wrote did not give us our expected result, the next question will be, what code to use then, and as we already had in mind, the aim is to use the child selector in JavaScript to select a particular child without using a class or an ID, so, if we change our JavaScript code to the one below, we should get the expected result

const target = document.querySelector(“.nav > ul:nth-child(4) li:nth-child(3)”);

target.style.color =”white”

if no bug exist in your code, your output should be

child sector in javascript successful

Which is your target.

This demonstration only shows how you can use the child selector in javascript to  target an li element in a ul for styling, you can target a button or even a link,but the element we taget in this illustrationis a text, there are much more manipulation you can do after targeting the UL child.

hopefully this illustration helps you on how to use the child selector in JavaScript to select a particular child of a parent for styling or manipulation.

Leave a Comment

Your email address will not be published. Required fields are marked *