CSS select parent element
CSS Select Parent Element
In CSS, we often need to style child elements, but sometimes we also need to style parent elements. This article explains how to use CSS selectors to select and style parent elements.
1. Use the :has pseudo-class to select parent elements that contain specific child elements
The :has pseudo-class can be used to select parent elements that contain specific child elements. For example, we can select and style parent elements that contain child elements with a specific class name. </p><div class="eaa-wrapper eaa_after_nth_p eaa_desktop" id="eaa_after_nth_p"><div class="eaa-ad" style=""><div class="aligncenter" style="max-width:336px;">
<ins class="adsbygoogle adsbygoogle-dis" data-ad-client="ca-pub-8722128765990495" data-ad-format="fluid" data-ad-layout="in-article" data-ad-slot="6101954166" style="display:block; text-align:center;"></ins>
<script>/**/
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div></div></div>
<pre data-language="HTML"><code class="language-markup line-numbers"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Selecting the Parent Element</title>
<style>
.parent:has(.child) {
background-color: lightblue;
}
.child {
color: white;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">geek-docs.com</div>
</div>
<div class="parent">
<div class="child">example.com</div>
</div>
</body>
</html>
Code Running Result:
In the example above, we use the :has(.child) selector to select parent elements that contain child elements with the class name .child and set their background color to lightblue.
2. Use the :not pseudo-class to exclude the parent of specific child elements
The :not pseudo-class can be used to exclude the parent of specific child elements. For example, we can exclude the parent of child elements with a specific class name and style them accordingly.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Select parent element</title>
<style>
.parent:not(:has(.child)) {
background-color: lightblue;
}
.child {
color: white;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">geek-docs.com</div>
</div>
<div class="parent">
<div>example.com</div>
</div>
</body>
</html>
Code Running Result:
In the example above, we use the :not(:has(.child)) selector to exclude parent elements that contain child elements with the class name .child and set their background color to lightblue.
3. Use the :nth-child pseudo-class to select a specific parent element.
The :nth-child pseudo-class can be used to select a specific parent element. For example, we can select the parent element of the second child element and apply styles to it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS select parent element</title>
<style>
.parent:nth-child(2) {
background-color: lightblue;
}
.child {
color: white;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">geek-docs.com</div>
</div>
<div class="parent">
<div class="child">example.com</div>
</div>
</body>
</html>
Result of running the code:
In the above example, we use the :nth-child(2) selector to select the parent element of the second child element and set its background color to lightblue.
4. Use the :nth-last-child pseudo-class to select the parent element at the last specific position
:nth-last-child pseudo-class can select the parent element at the last specific position. For example, we can select the parent element of the second-to-last child element and style it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS select parent element</title>
<style>
.parent:nth-last-child(2) {
background-color: lightblue;
}
.child {
color: white;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">geek-docs.com</div>
</div>
<div class="parent">
<div class="child">example.com</div>
</div>
</body>
</html>
Code running results:
In the above example, we use the :nth-last-child(2) selector to select the parent element of the second-to-last child element and set its background color to lightblue.
5. Use the :first-child pseudo-class to select the parent element of the first child element
:first-child pseudo-class can select the parent element of the first child element. For example, we can select the parent of the first child and style it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Select Parent Element</title>
<style>
.parent:first-child {
background-color: lightblue;
}
.child {
color: white;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">geek-docs.com</div>
</div>
<div class="parent">
<div class="child">example.com</div>
</div>
</body>
</html>
Result of running the code:
In the example above, we use the :first-child selector to select the parent of the first child and set its background color to lightblue.
6. Use the :last-child pseudo-class to select the parent of the last child
The :last-child pseudo-class can be used to select the parent of the last child. For example, we can select the parent of the last child and set its style.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS select parent element</title>
<style>
.parent:last-child {
background-color: lightblue;
}
.child {
color: white;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">geek-docs.com</div>
</div>
<div class="parent">
<div class="child">example.com</div>
</div>
</body>
</html>
Result of running the code:
In the example above, we use the :last-child selector to select the parent element of the last child and set its background color to lightblue.
7. Use the :only-child pseudo-class to select a parent element with only one child.
The :only-child pseudo-class can be used to select a parent element with only one child. For example, we can select a parent element with only one child and set its style.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Select Parent Element</title>
<style>
.parent:only-child {
background-color: lightblue;
}
.child {
color: white;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">geek-docs.com</div>
</div>
</body>
</html>
Code Runtime Result:
## 8. Use the :empty pseudo-class to select parent elements with no children
:empty pseudo-class can be used to select parent elements with no children. For example, we can select a parent element with no children and apply styles to it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Select Parent Element</title>
<style>
.parent:empty {
background-color: lightblue;
}
</style>
</head>
<body>
<div class="parent">
</div>
<div class="parent">
<div class="child">geek-docs.com</div>
</div>
</body>
</html>
Code Runtime Result:
In the example above, we use the :empty selector to select parent elements with no children and set their background color to lightblue.
9. Use the :not(:empty) pseudo-class to select parent elements with children
The :not(:empty) pseudo-class can be used to select parent elements with children. For example, we can select parent elements with children and apply styles to them.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS select parent element</title>
<style>
.parent:not(:empty) {
background-color: lightblue;
}
.child {
color: white;
}
</style>
</head>
<body>
<div class="parent">
</div>
<div class="parent">
<div class="child">geek-docs.com</div>
</div>
</body>
</html>
Code running results:
In the example above, we use the :not(:empty) selector to select the parent element that contains child elements and set its background color to lightblue.
10. Use the :root Pseudo-Class to Select the Document’s Root Element
The :root pseudo-class can be used to select the document’s root element. For example, we can select and style the document’s root element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Select Parent Element</title>
<style>
:root {
font-size: 16px;
}
</style>
</head>
<body>
<h1>geek-docs.com</h1>
<p>Lorem ipsum dolor sit amet.</p>
</body>
</html>
Code Runtime Result:
In the example above, we use the :root selector to select the document’s root element and set its font size to 16px.