Descendant Selector
In CSS, the descendant selector is used to select an element that is a descendant of another element. The descendant selector is represented by a whitespace character (
) between two selectors.
Syntaxβ
The syntax for the descendant selector is as follows:
selector1 selector2 {
/* CSS properties */
}
selector1
: The ancestor element.selector2
: The descendant element.CSS properties
: The CSS properties to be applied to the descendant element.
Exampleβ
In the following example, the descendant selector is used to select all <span>
elements that are descendants of the <div>
element:
div span {
color: red;
}
In the HTML code below, the CSS rule will apply the color red
to the text inside the <span>
element because it is a descendant of the <div>
element.
<div>
<span>This text will be red.</span>
</div>
The descendant selector can be used to select multiple levels of descendants. For example, the following CSS rule will apply the color blue
to the text inside the <span>
element that is a descendant of the <div>
element, which is a descendant of the <body>
element:
- The descendant selector is represented by a whitespace character (
- The descendant selector selects an element that is a descendant of another element.
- The descendant selector can be used to select multiple levels of descendants.
- The descendant selector is also known as the space combinator.
- The descendant selector is more specific than the descendant combinator (
>
) and less specific than the child combinator (~
).
Example: Using Descendant Selectorβ
In the following example, the descendant selector is used to select all <span>
elements that are descendants of the <div>
element:
- HTML
- styles.css
<!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>Descendant Selector Example</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div>
<span>This text will be red.</span>
</div>
</body>
</html>
div span {
color: red;
}
Now, you can see the output of the above code in the Browser Window like this:
In the above example, the CSS rule will apply the color red
to the text inside the <span>
element because it is a descendant of the <div>
element.
Example: Using Multiple Levels of Descendantsβ
In the following example, the descendant selector is used to select all <span>
elements that are descendants of the <div>
element, which is a descendant of the <body>
element:
- HTML
- styles.css
<!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>Descendant Selector Example</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div>
<span>This text will be blue.</span>
</div>
</body>
</html>
body div span {
color: blue;
}
Now, you can see the output of the above code in the Browser Window like this:
In the above example, the CSS rule will apply the color blue
to the text inside the <span>
element because it is a descendant of the <div>
element, which is a descendant of the <body>
element.
Related Selectorsβ
- Child Selector: The child selector selects an element that is a direct child of another element.
- Adjacent Sibling Selector: The adjacent sibling selector selects an element that is immediately preceded by a specified element.
- General Sibling Selector: The general sibling selector selects an element that is preceded by a specified element.
- Attribute Selector: The attribute selector selects elements based on their attributes.
- Pseudo-Class Selector: The pseudo-class selector selects elements based on their state or position.