Why child and descendant selectors exist?

CSS is the short form of Cascading Style Sheets. CSS describes the working of HTML and the way it is displayed on a screen or on other media. CSS helps to save a lot of work. It can help to control the layout of multiple web pages all at a time. CSS has a part known as CSS combinators.

Here, we are going to see a detailed description of CSS combinators.

CSS Combinator

CSS combinators are used to clarify the connection between selectors. A CSS selector may have more than one simple selector.

Types of Combinator

The four different types of combinators in CSS are:

  • Child Selector
  • Descendant Selector
  • Adjacent Sibling Selector
  • General Sibling Selector

CSS Selector

A CSS rule set consists of a selector and a declaration block. The selector points to the HTML element that we want to style. A CSS declaration ends with a semi-colon. CSS selectors are generally used to select HTML elements based on element name, attribute, class, id and more.

Descendant Selector

A descendant selector brings out and finds a match of all the elements which are descendants of a specific element. The first simple selector here is ancestor element which is a kind of structurally superior element like a parent element or a parent of parent element. The second selector is the Descendant element that we want to match. The combinators used here are whitespace character, space, line feed, form feed, carriage return, and others. Some whitespace characters can be used around all kinds of combinators which is why more than one whitespace character can be included between simple selectors in a descendant selector.

A descendant selector is a selector with white space between two selectors without a combinator. For example, the term ulli{}  means that a list of items is a descendant of an unordered list. Descendant means we can place it at any location nested within it.  It could be a direct child or could be five levels deep.

An example of HTML code fragment is given below:

<ul>

<li>Item 1</li>

<li>

<ol>

<li>Item 1A</li>

<li>Item 2A</li>

</ol>

</li>

</ul>

The elements in above fragment can be matched using selector below:

ul li

{

:declarations

}

The selector is used to match all the li elements that are descendant of the ul element which means every li element has aul element as its ancestor. This selector is said to be the most expensive selector  of all but it is very fast in comparison to other selectors.

Child Selector

This is utilized to coordinate components that are immediate offspring of different components, which is somewhat more exact than the traditional selector.

The syntax of a child selector is:

Body > p {color : green};

The child selector is very easy to use. A greater than symbol is used between two other selectors. On execution of this statement, the corresponding paragraph under the body will become green. But any paragraph of some other element will remain unaffected in this case.

Difference Between Child and Descendant Selector

With the concept of a tree, we can easily differentiate between child and descendant selectors. In case of a descendant selector, we can consider all those that come under the subdivisions of a particular node in a tree or rather belongs to a part of a subtree. However, in case of a child, the node which is the direct child node of an element can be considered as a child selector. The child combinatory always requires the element to be the immediate element down the tree structure.

Here, we will discuss an example to show the difference between child and descendant selectors.

<html>

<head>

<title>CSS Descendant Selector</title>

<style>

div p {

                 font size: 24 px;

}

</style>

</head>

</body>

<div>

<p>Child Selector</p>

<div>

<p>Descendant Selector</p>

</div>

<h4>Child Selector</h4>

<p>Child selector</p>

</div>

</body>

</html>

More about the selectors you can read here (CSS2) and here (CSS3).