Identify all div elements with a specific class within the parent div

Question

Identify all div elements with a specific class within the parent div

How can I use query selector to exclusively target the p and p2 divs inside of a r class, without selecting them if they are outside of that class?

<div>
<div class="r"><div class="p"></div><div class="p2"></div></div> //This is what I want to select, using the parent div tag name
</div>

<div class="r"><div class="p"></div><div class="p2"></div></div> //I don't want to select this if the parent div is body

CSS

.p,.p2{
height:50px;
width:50px;
background-color:orange
}

I have tried the following JavaScript code. Is it correct for achieving this?

c = document.querySelectorAll(' x >.r' ) //where x is the parent tag tagName of r

javascript

Answer 1

Answer №1

Based on your specific needs, you are looking to target the descendants of the first child element only.

To achieve this, simply utilize the :first-child selector.

var firstChild = document.querySelector(".r:first-child");
var descendants = firstChild.querySelectorAll(".p, .p2");

Array.from(descendants).forEach(function(item){
  item.style.backgroundColor = "red";
});

Check out the DEMO for reference

Answer 2

Based on your specific needs, you are looking to target the descendants of the first child element only.

To achieve this, simply utilize the :first-child selector.

var firstChild = document.querySelector(".r:first-child");
var descendants = firstChild.querySelectorAll(".p, .p2");

Array.from(descendants).forEach(function(item){
  item.style.backgroundColor = "red";
});

Check out the DEMO for reference

Answer 3

Answer №2

If you want to select elements with a specific class, you can use the following code:

const selectedElements = document.querySelectorAll(".r .p, .r .p2");

By using a comma in the querySelectorAll method, you can separate multiple selectors. Additionally, in CSS syntax, a b signifies selecting element b inside of element a.

Answer 4

If you want to select elements with a specific class, you can use the following code:

const selectedElements = document.querySelectorAll(".r .p, .r .p2");

By using a comma in the querySelectorAll method, you can separate multiple selectors. Additionally, in CSS syntax, a b signifies selecting element b inside of element a.

Answer 5

Answer №3

If you're looking to target elements by their class, you can use the following code:

document.querySelectorAll('div div.r .p, div div.r .p2');

These selectors can be used anywhere, such as in a style rule, without the need for extra scripting.

For example:

window.onload = function() {
  var x = document.querySelectorAll('div div.r .p, div div.r .p2');
  console.log('Found: ' + x.length);
};

<!-- Elements nested within a div -->
<div>
  <div class="r">
    <div class="p">p inside div and div.r</div>
    <div class="p2">p2 inside div and div.r</div>
  </div>
</div>

<!-- Elements nested within body -->
<div class="r">
  <div class="p">p inside body and div.r</div>
  <div class="p2">p2 inside body and div.r</div>
</div>

Answer 6

If you're looking to target elements by their class, you can use the following code:

document.querySelectorAll('div div.r .p, div div.r .p2');

These selectors can be used anywhere, such as in a style rule, without the need for extra scripting.

For example:

window.onload = function() {
  var x = document.querySelectorAll('div div.r .p, div div.r .p2');
  console.log('Found: ' + x.length);
};

<!-- Elements nested within a div -->
<div>
  <div class="r">
    <div class="p">p inside div and div.r</div>
    <div class="p2">p2 inside div and div.r</div>
  </div>
</div>

<!-- Elements nested within body -->
<div class="r">
  <div class="p">p inside body and div.r</div>
  <div class="p2">p2 inside body and div.r</div>
</div>

Identify all div elements with a specific class within the parent div

Answer №1

Check out the DEMO for reference

Answer №2

Answer №3

Similar questions

Utilizing Next.js and Redux for Enhanced Authentication Experience

What is the best way to instantiate objects, arrays, and object-arrays in an Angular service class?

What is the recommended approach for passing parameters to a JavaScript function from an anchor tag?

Executing multiple Ajax requests on CodeIgniter 3 from two separate pages

Using Angular promises and the $http service

After utilizing the function, the forward and back arrows are no longer visible

Issue occurred while trying to set the value from an API call response in the componentDidMount lifecycle method

Activate a click on a div element to enable smooth scrolling when using the page down and page up keys

What could be causing the issue with lodash throttle not functioning correctly in the useWindowSize custom hook?

inSession variable in express: set to false

Ways to showcase INPUT TYPE when making a Selection?

Facebook has broadened the scope of permissions for canvas applications

The jQuery ajax function functions flawlessly on a local environment, but encounters issues when used on a

Make sure all of the inner tags are properly contained within their respective containers

Toggle the display of dropdown 2 or dropdown 3 depending on the option chosen in dropdown 1

Generating modal pages on the fly

Transferring pictures between folders

Why is the function app.get('/') not triggering? The problem seems to be related to cookies and user authentication

Utilize the useState hook to update state when changes occur in the

Here is a way to display the chosen option from a list using Angular Js