Updated June 3, 2023
Introduction to CSS Parent Selector
Before we get into the parent selector in CSS, we need to understand what is a selector. The selector is defined as selecting the specific element from all the existing elements and styling those elements according to our requirements. Now the parent selector is nothing but the selector of the parent; it means a top element of all inner elements. There is no feature called parent selector. This feature creates a performance issue.
How does Parent Selector work in CSS?
Even if we don’t have a parent selector feature, still we can achieve this requirement in 2 ways.
They are:
- Current CSS selectors specs.
- Selectors Level 3 specs.
Syntax 1:
.nav-link::parent {
property: value;
}Syntax 2:
<body>
<div class="page">
<img alt="img" src="image path">
</div>
</body>
.page div {
property: value;
}
.page div img {
property: value;
}Any browser, while executing the instructions, first executes the top element, then the bottom, and so on. In the above Syntax 2, first, it executes the body tag it thinks the inside is empty and applies the styles, next executes the div tag and it thinks the inside is empty and applies the styles and lastly executes img tag and applies the settings.
Examples to Implement CSS Parent Selector
Below are the examples mentioned :
Example #1
Square shape parent and child for parent selector Example:
Code:
<!doctype html>
<html>
<head>
<title>Parent Selector</title>
<style>
/*Parent and child styles*/
.classParent {
width: 400;
height: 400px;
background: fuchsia;
}
.classParent,
.classSelector {
display: flex;
justify-content: center;
align-items: center;
}
.classSelector {
cursor: pointer;
background: brown;
width: 50%;
height: 50%;
}
/*When we move the cursor on to child element then immediately parent background color changes*/
.classParent {
background: blue;
pointer-events: none;
}
.classParent:hover {
background: fuchsia;
}
.classParent
.classSelector {
pointer-events: auto;
}
h1
{
color:green;
text-align: center;
}
p
{
color: blue;
border: 2px solid fuchsia;
font-size: 20px;
}
</style>
</head>
<body>
<h1>Introduction to Parent Selector</h1>
<p>Before we get into the parent selector in CSS, we need to understand what is a selector? Selector in CSS is defined as selecting the specific element from all the existing elements and style those elements according to our requirement. Now parent selector is nothing but selector of the parent, it means top element of the all inner elements. Basically there is no feature called parent selector in CSS. This feature creates performance issue.</p>
<div class="classParent">
<div class="classSelector"></div>
</div>
</body>
</html>Output:
When the cursor hovers on to brown color, then output:
Example #2
Paragraph child tag with div tag parent selector Example:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
/*All inside div selectors paragraphs are applied with below styles*/
div > p {
color: white;
border: 6px ridge green;
font-size: 20px;
background: brown;
}
h1
{
color: orange;
text-align: center;
}
</style>
</head>
<body>
<h1>Brief Introduction-1 about Parent Selector</h1>
<div>
<p>Before we get into the parent selector in CSS, we need to understand what is a selector? Selector in CSS is defined as selecting the specific element from all the existing elements and style those elements according to our requirement. Now parent selector is nothing but selector of the parent, it means top element of the all inner elements. Basically there is no feature called parent selector in CSS. This feature creates performance issue.</p>
</div>
<div>
<h1>Brief Introduction-2 about Parent Selector</h1>
</div>
<p>Before we get into the parent selector in CSS, we need to understand what is a selector? Selector in CSS is defined as selecting the specific element from all the existing elements and style those elements according to our requirement. Now parent selector is nothing but selector of the parent, it means top element of the all inner elements. Basically there is no feature called parent selector in CSS. This feature creates performance issue.</p>
</body>
</html>Output:
Example #3
Parent selector with JavaScript Example:
Code:
<!DOCTYPE html>
<html>
<head>
<title>Parent Selector</title>
<style>
div
{
font-size: 25px;
color: green;
}
h1
{
color: blue;
text-align: center;
}
</style>
<script>
boxes = document.querySelectorAll('div');
[].forEach.call(boxes, function (p) {
if (p.hasChildNodes() && p.firstChild.nodeName=="a") {
console.log(p)
};
});
</script>
</head>
<body>
<h1>Introduction to Parent Selector by using JavaScript</h1>
<div>Hi, I am Amardeep</div>
<div><a href="https://www.educba.com/">EDUCBA Online Courses</a></div>
<div>Philip</div>
<div><a href="https://www.google.com/">Google</a></div>
</body>
</html>Output:
Conclusion
There is no direct way to perform the parent selector operation, but we can do it by using either the current selector’s specs or the selector’s Level 3 specs. Also, we can do it by using JavaScript.
Recommended Articles
This is a guide to CSS Parent Selector. Here we discuss an introduction to CSS Parent Selector, and how it works with respective examples. You can also go through our other related articles to learn more –
