What is Descendant Selector in CSS ?
Last Updated :
31 May, 2023
In this article, we will see the descendant selector, provided by CSS, along with understanding its implementation through examples.
A CSS Selectors are used to select HTML elements based on their element name, id, attributes, etc, which facilitates to select more than one element simultaneously. Descendant Selector is one of the type of Combinators in CSS where the combinators combine 2 selectors in such a way that if an ancestor element matches with the first selector then the elements are matched by the second selector will be selected & these selectors use the descendant Combinator are Descendant Selectors. In simple words, the Descendant Selectors can be any selector having the white-space in between the elements without using any combinators. Descendant is a manner to nested anywhere within the DOM tree. This selector is used to select all the child elements of the specified tag.
Syntax:
first_selector second_selector {
css properties: values;
}
The first simple selector (first_selector) represents the ancestor element or parent element, and the second simple selector (second_selector) represents the descendant element. We use white space between these two to represent the descendant selector.
The descendant selectors are the most expensive selector in CSS, which means it’s pretty hard or slow for rendering whole engines to find out and do stuff with.
Example 1: The below example demonstrates the implementation of the descendant selector. CSS properties are applied on all p tag elements that are direct or nested descendants of ancestor selector main-div class.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< style >
/*CSS properties applied on all
direct or nested 'p' elements */
.main-div p {
background-color: rgb(188, 238, 189);
}
</ style >
</ head >
< body >
< h1 style = "color:green" >
GeeksforGeeks
</ h1 >
< h2 >Descendant Selector</ h2 >
< p >GFG First Paragraph</ p >
< div class = "main-div" >
< p >GFG Second Paragraph</ p >
< p >GFG Third Paragraph</ p >
< p >GFG Fourth Paragraph</ p >
< div class = "sub-div" >
< p >GFG Fifth Paragraph</ p >
</ div >
</ div >
< p >GFG Sixth Paragraph</ p >
</ body >
</ html >
|
Output:
Example 2: The following is another example of a descendant selector, where CSS properties are applied only to the ‘p‘ tag elements which are direct or nested descendants of only ‘h1‘ tag elements.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< style >
/* CSS properties are applied on all direct
or nested 'p' elements of all 'h2' */
h2 p {
background-color: rgb(5, 60, 6);
font-family: cursive;
color: whitesmoke;
}
</ style >
</ head >
< body >
< h1 style = "color:green" >
GeeksforGeeks
</ h1 >
< strong >Descendant selector</ strong >
< h2 >
This is h2 element
< p >This is paragraph of h2 element</ p >
</ h2 >
< p >This is outer paragraph</ p >
< h2 >
This is another h2 element
< p >
This is another paragraph
of second h2 element
</ p >
</ h2 >
< h3 >
This is h3 element
< p >This is paragraph of h3 element</ p >
</ h3 >
</ body >
</ html >
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...