- The Descendant Selector is a selector in CSS that allows you to target elements that are descendants of another element. It is represented by a space ( ) between two selectors. The descendant selector matches any element that is a descendant of the specified parent element, regardless of how deep the descendant is nested.
Here's the syntax for the descendant selector:
parentSelector descendantSelector {
/* CSS rules */
}
- The parentSelector is the selector for the parent element, and the descendantSelector is the selector for the descendant element. The descendantSelector will only select elements that are inside the parent element.
Let's say you have the following HTML structure:
- If you want to apply a style to the `<li>` elements inside the `<ul>` element, you can use the descendant selector as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
ul li {
/* CSS rules */
color: blue;
}
</style>
<title>Document</title>
</head>
<body>
<div>
<h1>Title</h1>
<p>Some text</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
</body>
</html>
- In this example, the descendant selector `ul li` selects all `<li>` elements that are descendants of a `<ul>` element. The CSS rule `color: blue;` will set the text color of these `<li>` elements to blue.
Another Example 1:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div p {
color: red;
}
</style>
<title>Document</title>
</head>
<body>
<div>
<h1>Title</h1>
<p>Some text</p>
<div>
<h1>new heading</h1>
<p>hello world</p>
<p>
paragraph 1
<p>
paragraph 2
</p>
</p>
</div>
</div>
</body>
</html>
Another Example 2:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.parent h1 {
color: red;
}
</style>
<title>Document</title>
</head>
<body>
<div class="parent">
<h1>Title</h1>
<p>Some text</p>
<div>
<h1>new heading</h1>
<p>hello world</p>
<p>
paragraph 1
<p>
paragraph 2
</p>
</p>
</div>
</div>
</body>
</html>
Another Example 3:
- Target multiple descendent elements.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.parent h1, p {
color: red;
}
</style>
<title>Document</title>
</head>
<body>
<div class="parent">
<h1>Title</h1>
<p>Some text</p>
<div>
<h1>new heading</h1>
<p>hello world</p>
<p>
paragraph 1
<p>
paragraph 2
</p>
</p>
</div>
</div>
</body>
</html>
- The descendant selector can be used with any combination of selectors. For example:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.parent .child p {
color: blue;
}
</style>
<title>Document</title>
</head>
<body>
<div class="parent">
<h1>Title</h1>
<p>Some text</p>
<div class="child">
<h1>new heading</h1>
<p>hello world</p>
<p>
paragraph 1
<p>
paragraph 2
</p>
</p>
</div>
</div>
</body>
</html>
- In this case, the descendant selector `.parent .child p` selects all `<p>` elements that are descendants of an element with the class "child", which itself is a descendant of an element with the class "parent". This allows you to target specific elements within a nested structure.
- It's important to note that the descendant selector will select all matching elements that are descendants of the specified parent, regardless of their level of nesting. It doesn't matter if the descendant elements are direct children, grandchildren, or nested deeper within the parent element.
- By using the descendant selector, you can apply styles to specific elements within a hierarchical structure, allowing for fine-grained control over the presentation of your web page.
No comments:
Post a Comment