CSS Descendant Selector

CSS selectors are utilized to select the HTML elements, which helps in applying styles to the elements. Many selectors in CSS help in selecting the HTML elements.

Some of the selectors are used to specify the relationship between two elements, which are called CSS combinators. The descendant selector is one of the CSS combinators. We will understand the descendant selector in this article, but let us first understand the CSS combinator.

CSS Combinator

A combinator is utilized to depict the relationship between two selectors.

For instance, if you want to reach a place called "Shastri Nagar" and you type "Shastri Nagar" on the map then it will demonstrate a list of various places with identical names. When the next time you specify the name of the city and type "Shastri Nagar, Ghaziabad" then you will find the exact location where you want to reach.

In such a way, CSS combinators help to locate and select a specific element by specifying the relationship between two selectors. The CSS combinator combines two selectors and forms a single selector. It is essential to remember that the elements must satisfy the relationship between two selectors.

Syntax:

The "selector1" and "selector2" are the selectors in the above-provided syntax. The sign of the combinator comes in place of the "combinator" and the CSS properties are declared under the curly braces.

Descendant Selector

The CSS descendant selector is utilized to match the descendant elements of a particular element. The word Descendant indicates nested anywhere in the DOM tree. It can be a direct child or deeper than five levels, but it will still be referred to as a descendant.

The Descendant combinator is represented by utilizing a single space. It combines two selectors in which the first selector represents an ancestor (parent, parent's parent, etc.), and the second selector represents descendants. The elements matched by the second selector are selected if they have an ancestor element that matches the first selector. Descendant selectors use the descendant combinators.

Syntax

The "selector1" and "selector2" are the selectors in the above-given syntax. The descendant selector is a single space between two selectors. The CSS properties are declared inside the curly braces.

Demonstrations of the CSS Descendant Selector

The demonstrations will help us comprehend the CSS descendant selector properly. Let's see how it is implemented.

Demonstration 1:

We will put the style to the HTML elements in this demonstration with the help of the CSS descendant selector. We will give style to <p> elements by utilizing the CSS descendant selector.

Code:

Output:

We can witness in the result below that the first paragraph, second paragraph, and third paragraph have been styled as these three <p> elements are the descendant element of the parent element "<div>". The fourth paragraph has no effect because it is not a child of the <div> element.

CSS Descendant Selector

Demonstration 2:

  • We will construct tables in this demonstration and apply style to the tables utilizing the descendant selector.
  • We will define the relationship between the class selector ".employee-table" and element selector "th" utilizing the descendant selector (space) between the selectors and putting border style on the <th> elements of "Employee table".
  • We will specify the relationship between the class selector ".product-table" and element selector "th" utilizing the descendant selector (space) between the selectors and apply the border style on the <th> elements of "Product table".

Code:

Output:

Here is the output where we can witness that the different border styles have been put to the "Employee table" and "Product table".

CSS Descendant Selector

Demonstration 3:

  • We will create two lists in this demonstration and style them with the help of the descendant selector.
  • We will utilize the descendant selector (space) between the class selector ".batsmen" and element selector "li" to select a specific list which is "List of Indian Cricket Batsmen" and give a hotpink color to the text written inside the <li> tags.
  • We will also utilize the descendant selector (space) between the class selector "bowlers" and element selector "li" to select a specific list, which is "List of Indian Cricket Bowlers" and give an olive color to the <li> element.
  • We will utilize the descendant selector (space) between two element selectors, i.e., div and h3, which selects the specific <h3> element.

Code:

Output:

Here, in the output, we can witness that the different text colors have been put to both the " List of Indian Cricket Batsmen" and " List of Indian Cricket Bowlers".

We can witness that the "red" text color has been applied on <h3> element which is written inside the <div> element whose class attribute value is "batsmen" but the style has not been applied on the other <h3> element because we have specifically selected the <h3> element which is the child of <div class=".batsmen"> element utilizing the descendant selector.

CSS Descendant Selector

Demonstration 4:

  • We will create a form in this demo and put the style to the form utilizing the descendant selector.
  • We will make the utilization of the descendant selector (space) between the two element selectors, i.e., "div" and "label" that selects all the <label> elements that come inside an <div> element and provide style to the <label> elements.
  • We will make the utilization of the descendant selector (space) between the two selectors, i.e., "div" and "input[type="text"]" that selects all the "input[type="text"]" that comes inside an <div> element and provide style.
  • We will utilize the descendant selector (space) between the two selectors, i.e., "div" and "input[type="date"]" that selects a specific element that comes inside an <div> element and provides style.
  • We will utilize the descendant selector (space) between the two selectors, i.e., "div" and "input[type="submit"]" that selects a specific element that comes inside an <div> element and provides style.

Code:

Output:

Here is the output where we can witness that the style has been applied utilizing the descendant selector on the <label> element, which is the child of <div> element.

We can witness that the style has been applied to the input[type="text"], input[type="date"], and input[type="submit"] utilizing the CSS descendant selector.

CSS Descendant Selector

Browser Support

Following are the browsers that support the CSS descendant selector:

  • Google Chrome
  • Opera
  • Microsoft Edge
  • Safari
  • Firefox

Conclusion

We have comprehended the CSS descendant selector in this article. The descendant selector defines the relationship between two elements. It is utilized to select the descendant element and apply style to it.


Next TopicCSS calc()