Difference Between Descendant Selector and Direct Child Selector

Selectors play a significant role in the style of any element; if we use the selector in the right way, we can reduce our CSS code. There are two similar selectors, but there is little difference between them Descendant Selector and Direct Child Selector. Today we will see the difference between them.

1.Descendant Selector :The descendant Selector selects all child elements of the selected parent element.

Example: 

HTML Code : 

<ul>
<li>Website Design
<ul>
<li>HTML & CSS</li>
<li>Bootstrap</li>
<li>JS</li>
</ul>
</li>
<li>Graphic Design</li>
<li>Website Development</li>
<li>Video Editing</li>
</ul>

CSS Code

ul li 
{
  color:red;
}

In this example, the descendant selector selects all li of selected ul elements.

2. Direct Child Selector : This selector selects only the direct child of the selected element. Example: 

HTML Code : 

<ul>
<li>Website Design
<ul>
<li>HTML & CSS</li>
<li>Bootstrap</li>
<li>JS</li>
</ul>
</li>
<li>Graphic Design</li>
<li>Website Development</li>
<li>Video Editing</li>
</ul>

CSS Code

ul>li 
{
  color:red;
}

In this example, the direct child selector selects only direct li of selected ul elements. It will not select HTML, CSS, js, jquery li because it is not a direct child of ul; it is a child of the first li element.

Categories: web designing css

Written By : Web Development Institute