CSS Parent
CSS parent
In
1. Using the Parent Selector
In CSS, we can use the parent selector to select the parent element. The parent selector is a CSS4 proposal and isn’t yet supported by all browsers, but it can be simulated using a hack. Here is a sample code:
/* Use the parent selector to simulate selecting the parent element */
.parent:hover .child {
color: red;
}
In the above example, when the mouse hovers over the parent element, the child element’s text color changes to red. Here, the parent element’s pseudo-class :hover is used to select the child element, achieving an effect similar to the parent selector.
2. Using the Parent Element’s Class Name Selector
In addition to the parent selector, we can also use the parent element’s class name selector to select the parent element. This method is simpler and more direct and works well in most cases. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parent Selector</title>
<style>
/* Parent element class selector */
.parent {
background-color: lightblue;
padding: 10px;
}
.parent .child {
color: red;
}
</style>
</head>
<body>
<div class="parent">
<p class="child">Hello, geek-docs.com!</p>
</div>
</body>
</html>
Code execution result:
In the example above, we select the parent element using its class name selector .parent.child and set the text color of its child elements to red.
3. Using the Parent Element’s ID Selector
In addition to class name selectors, we can also select the parent element using its ID selector. ID selectors have a higher priority and apply to a specific parent element. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parent Selector</title>
<style>
/* Parent element ID selector */
#parent {
background-color: lightblue;
padding: 10px;
}
#parent .child {
color: red;
}
</style>
</head>
<body>
<div id="parent">
<p class="child">Hello, geek-docs.com!</p>
</div>
</body>
</html>
Code execution result:
In the example above, we select the parent element using its ID selector, #parent.child, and set the text color of its child elements to red.
4. Using the Parent Element’s Pseudo-Class Selector
In addition to class name and ID selectors, we can also use the parent element’s pseudo-class selector to select the parent element. Pseudo-class selectors can select elements based on their state or position, making them very flexible. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parent Selector</title>
<style>
/* Parent element pseudo-class selector */
.parent:hover .child {
color: red;
}
</style>
</head>
<body>
<div class="parent">
<p class="child">Hello, geek-docs.com!</p>
</div>
</body>
</html>
Code running result:
In the above example, we use the parent element’s pseudo-class selector .parent:hover .child to select the parent element and set the text color of its child elements to red.
5. Using the Parent Element’s Attribute Selector
In addition to pseudo-class selectors, we can also use the parent element’s attribute selector to select the parent element. Attribute selectors can select elements based on their attribute values, making them very flexible. Here’s a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parent Selector</title>
<style>
/* Parent element attribute selector */
.parent[data-type="container"] .child {
color: red;
}
</style>
</head>
<body>
<div class="parent" data-type="container">
<p class="child">Hello, geek-docs.com!</p>
</div>
</body>
</html>
Code Runtime Results:
In the above example, we use the parent element’s attribute selector .parent[data-type="container"] .child to select the parent element and set the text color of its child elements to red.
6. Using the Parent’s Descendant Selector
In addition to directly selecting the parent element, we can also use the parent’s descendant selector to select the parent element. The descendant selector can select all descendant elements of the parent element, making it very flexible. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parent Selector</title>
<style>
/* Parent element descendant selector */
.parent .child {
color: red;
}
</style>
</head>
<body>
<div class="parent">
<p class="child">Hello, geek-docs.com! </p>
</div>
</body>
</html>
Code running result:
In the example above, we use the descendant selector .parent.child to select the parent element and set the text color of all its descendants to red.
7. Using the Parent’s Child Selector
In addition to the descendant selector, we can also use the parent’s child selector to select the parent element. The child selector only selects the direct children of the parent element, making it very flexible. Here’s a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parent Selector</title>
<style>
/* Parent element's child selector */
.parent > .child {
color: red;
}
</style>
</head>
<body>
<div class="parent">
<p class="child">Hello, geek-docs.com!</p>
<span class="child">Welcome to geek-docs.com!</span>
</div>
</body>
</html>
Code Runtime Results:
In the above example, we use the parent’s child selector .parent > .child to select the parent element and set the text color of its direct children to red.
8. Using the Parent’s Adjacent Sibling Selector
In addition to the child selector, we can also use the parent’s adjacent sibling selector to select the parent element. The adjacent sibling selector selects the next adjacent sibling of the parent element and is very flexible. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parent Selector</title>
<style>
/* Parent element's adjacent sibling selector */
.parent + .sibling {
color: red;
}
</style>
</head>
<body>
<div class="parent">Hello, geek-docs.com!</div>
<div class="sibling">Welcome to geek-docs.com!</div>
</body>
</html>
Code Runtime Results:
In the above example, we use the parent’s adjacent sibling selector ( .parent + .sibling ) to select the parent element and set the text color of its next adjacent sibling to red.
9. Using the Parent’s Universal Sibling Selector
In addition to the adjacent sibling selector, we can also use the parent’s universal sibling selector to select the parent element. The universal sibling selector selects all adjacent siblings of the parent element and is very flexible. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parent Selector</title>
<style>
/* Generic sibling selector for parent element */
.parent ~ .sibling {
color: red;
}
</style>
</head>
<body>
<div class="parent">Hello, geek-docs.com!</div>
<div class="sibling">Welcome to geek-docs.com!</div>
<div class="sibling">Enjoy geek-docs.com!</div>
</body>
</html>
Code Runtime Results:
In the example above, we use the parent’s universal sibling selector, .parent ~ .sibling, to select the parent element and set the text color of all its adjacent siblings to red.
10. Using Pseudo-Class Selectors on Parent’s Children
In addition to basic selectors, we can combine pseudo-class selectors with parent’s children to select parent elements. This approach allows for more complex and precise selection. Here’s a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parent Selector</title>
<style>
/* Pseudo-class selector for child elements of a parent element */
.parent > p:first-child {
color: red;
}
</style>
</head>
<body>
<div class="parent">
<p>Hello, geek-docs.com!</p>
<p>Welcome to geek-docs.com!</p>
</div>
</body>
</html>
Code Running Results:
In the above example, we use the parent element’s child pseudo-class selector, .parent > p:first-child, to select the first child of the parent element and set its text color to red.
Through the above code, we’ve detailed how to use different CSS selectors to select a parent element and style its child elements.