3 Ways to Select all p Elements Inside a div Element in CSS?
You do not know, how to select an element inside a div element in CSS. If you do not know how to do it, this article is for you. In this article, I will explain, how do you select all p elements inside a div element. Most people know, how to use ID, Class, and element selector but some people do not know how to use element in element selector. Let me tell you 3 ways to select all elements inside a Div element.
You can select the inside element using the element1 element2 selector and the class1 class2 selector. Both of these ways are just so easy and quick, You can use both of these methods as an example below:
1. Element element selector Method
element1 element2 {
property: value;
}If you use element1 inside the element2 selector, you can select an HTML element and write the CSS style separately for it. You can easily select your HTML element by using this selector method.
<html>
<head>
<title>element element selctor</title>
<style type="text/css">
div p{
font-family: sans;
background: silver;
display: flex;
justify-content: center; }
</style>
</head>
<body>
<div>
<p>Welcome</p>
<p>TO</p>
<p>Wonder Develop</p>
</div>
</body>
</html>I will explain how do you select all p elements inside a div element, selector code above step by step:
- First wrote the HTML general syntax, then create a <div> tag inside the <body> tag.
- And created three <p> (paragraph) tags inside that <div> tag and wrote some text in that <p> tag.
- Now you want to write style only for those three <p> tags.
- For that, use the element in the element selector, first write the div and then the p tag in the CSS style.
- Then the selector, you can write the style to your liking.
2. Class class selector Method
.classname1 .classname2 {
property: value; }In this method, it is a little difficult for you to select all the inner elements. You must have the same class name to select all the elements, because only then can all inside elements be selected. If you do not give the same class name in all, the inside element will not be selected. So, you have to be careful in giving this class name.
<html>
<head>
<title>Class class selector</title>
<style type="text/css">
.a .b{
background-color: yellow;
color: darkviolet; }
</style>
</head>
<body>
<div class="a">
<p class="b">Welcome</p>
<p class="b">TO</p>
<p class="b">Wonder Develop</p>
</div>
</body>
</html>I will explain the class1 class2 Selector code above step by step:
- Enter the (paragraph) <p> tag you want, inside the div tag element.
- Create a class name for the div tag
- Write the same class name on all those <p> tags. This style of the selector will change depending on the class name you enter
- Then in CSS style enter the class name of your div tag first and then the class name of the p tag on the page.
- Now, all in your div tag inside the p tag were selected. You can write style to p tag of your choice.
3. Class Element Selector Method
<html>
<head>
<title>Class Element selector</title>
<style type="text/css">
.a p{
background-color: silver;
color: darkviolet; }
</style>
</head>
<body>
<div class="a">
<p >Welcome</p>
<p >TO</p>
<p >Wonder Develop</p>
</div>
</body>
</html>I will explain the class element Selector code above step by step:
- Create a class name for the div tag.
- For selecting all inside elements, First, write the class name of the div tag and then write the p tag.
- Now you can select the all inside p tag element.
Conclusion
I have told 3 examples of how do you select all p elements inside a div element. And if you have any doubts, please let us know in the comments.
