Descendant Selector
A descendant selector is used to select elements that are inside another HTML element.
What is a Descendant Selector?
A descendant selector targets an element that exists anywhere inside another element.
A space between two selectors is used to represent a descendant relationship.
Descendant Selector Flow
.container
.container p
Basic Syntax
parent descendant {
property: value;
}
The space between the parent and descendant selector indicates that the second element is inside the first.
Example 1: Select Paragraphs Inside a Div
div p {
color: blue;
}
Output
This paragraph is inside the div.
This paragraph is outside the div.
Example 2: Select Headings Inside a Section
section h2 {
color: green;
}
Output
CSS Tutorial
Example 3: Select Links Inside Navigation
nav a {
color: red;
}
Output
Important Points
- A space is used between the parent and descendant selectors.
- A descendant can be directly or indirectly inside the parent element.
- Descendant selectors can target multiple elements.
- They are useful for styling elements within a specific section of a page.
- Descendant selectors do not require the child to be a direct child.
Summary
A descendant selector selects elements that are located inside another element. It uses a space between selectors and can target both direct and indirect descendants.