In this article we will show you the solution of CSS select parent based on child, the Cascading style sheet or CSS is used to add style to the HTML. We can add style to the parent based on style by a CSS combinator, the CSS child selector (>).
As an example if a > b is written then a is the parent element and b is a child element. We can add style to all the b element under a element by, CSS child selector (>).
Step By Step Guide On CSS Select Parent Based On Child :-
Let us see an example on CSS select parent based on child.
<!DOCTYPE html>
<html lang = " en " >
<head>
<meta charset = " UTF - 8" >
<meta http-equiv = " X-UA-Compatible " content = " IE=edge " >
<meta name = " viewport " content = " width = device-width , initial-scale = 1.0 " >
<title> css select parent based on child </title>
<style>
h1 {
font-size : larger ;
font-weight : bolder ;
color : lightgreen ;
}
.container {
background-color: cyan;
}
div > p {
color : blue ;
background-color : blanchedalmond ;
border : 2px solid black;
}
div > div > p {
color : green ;
background-color : pink ;
border : 2px solid black ;
}
div > div > section {
color : white ;
background-color : black ;
font-weight : bolder ;
}
</style>
</head>
<body>
<h1> TALKERSCODE </h1>
<p> CSS Background Image Transparency </p>
<div class="container">
<p> this is the first paragraph </p>
<p> this is the second paragraph </p>
<p> this is the third paragraph </p>
<div>
<p> this is the fourth paragraph </p>
<p> this is the fifth paragraph </p>
<p> this is the sixth paragraph </p>
<section>
this is a section.
</section>
</div>
</div>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now the <head> tag is used to contain information about the web page. In this tag, a <title> tag is used which helps us to specify a webpage title.
- Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, the <body> tag is used to define the webpage body. All the contents to show on the website are written here.
- <h1> tag used to add heading here.
- Creating a <div> with a class “ container ” .
- Into that <div> creating some <p> element and also another <div>. between that <div> creating some <p> element and a section.
- Now create a <style> tag into the <head> tag to add CSS on this HTML file.
- by Addressing the class “container” adding style to the whole <div>
- By using CSS child selector ( >), adding style to all the <p> child element of the parent element <div>, div>p
- Also by div>div>p , we give style all the <p> element of the <div> between the ancestor element <div>.
- And also by div>div>section , we give style all the <section> element of the <div> between the ancestor element <div>
Conclusion :-
At last here in conclusion, here we can say that with the help of this article we are able to give CSS select parent based on child.
I hope this article on CSS select parent based on child helps you and the steps and method mentioned above are easy to follow and implement.
About Riya
