To select all p elements inside a div element, we can do this using JavaScript, jQuery, or CSS. Let’s take a look at how to do this in each.

Let’s first look at how to select all p elements inside a div element using JavaScript.

We will have to use the getElementById() method along with the getElementsByTagName() method. This will get us a list of all of the p elements within the div. We then have to loop through each one to access each p element.

var pTags = document.getElementById("div1").getElementsByTagName('p');
for( var i=0; i

Let's take a look at this with an example.


  
This is a paragraph in a div element div1.

  
This is a paragraph in a div element div1.

  
This is a paragraph in a div element div1.





  
This is a paragraph in a div element div2.

  
This is a paragraph in a div element div2.

  
This is a paragraph in a div element div2.

Using our JavaScript code from above, we can select all p elements inside the div, #div1 and change the background of each one. Let's see the code above first without any JavaScript code affecting it.

This is a paragraph in a div element div1.

This is a paragraph in a div element div1.

This is a paragraph in a div element div1.

This is a paragraph in a div element div2.

This is a paragraph in a div element div2.

This is a paragraph in a div element div2.

And now let's use the following JavaScript code to change the background color of each p element in #div1 to green.

var pTags = document.getElementById("div1").getElementsByTagName('p');
for( var i=0; i

Which would result in the following:

This is a paragraph in a div element div1.

This is a paragraph in a div element div1.

This is a paragraph in a div element div1.

This is a paragraph in a div element div2.

This is a paragraph in a div element div2.

This is a paragraph in a div element div2.

This can be done with much less code by using jQuery. Let's see how this is done below.

How To Select All p Elements Inside a Div Element Using jQuery

We can use jQuery to select all p elements inside a div element easily. Here is the code to do this.

$("#div1 p")

And that's it.

Let's see this in action with our same example from above.


  
This is a paragraph in a div element div1.

  
This is a paragraph in a div element div1.

  
This is a paragraph in a div element div1.





  
This is a paragraph in a div element div2.

  
This is a paragraph in a div element div2.

  
This is a paragraph in a div element div2.

And here is the jQuery code to change the background colors of all p elements in #div1 to green.

$("#div1 p").css("background-color","green");

Which would result in the following:

This is a paragraph in a div element div1.

This is a paragraph in a div element div1.

This is a paragraph in a div element div1.

This is a paragraph in a div element div2.

This is a paragraph in a div element div2.

This is a paragraph in a div element div2.

Finally, let's see this done using CSS.

How To Select All p Elements Inside a Div Element Using CSS

We can use CSS to select all p elements inside a div element easily. Here is the code to do this.

Let's see this in action with our same example from above.




  
This is a paragraph in a div element div1.

  
This is a paragraph in a div element div1.

  
This is a paragraph in a div element div1.





  
This is a paragraph in a div element div2.

  
This is a paragraph in a div element div2.

  
This is a paragraph in a div element div2.

Which would result in the following once more:

This is a paragraph in a div element div1.

This is a paragraph in a div element div1.

This is a paragraph in a div element div1.

This is a paragraph in a div element div2.

This is a paragraph in a div element div2.

This is a paragraph in a div element div2.

Hopefully this article has been useful to help you understand how to select all p elements inside a div element.

Categorized in:

HTML,

Last Update: March 4, 2024