Difference Between Descendant Selector and Direct Child Selector

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

Trending Courses

CodeIgniter

Regular : 45 Days

Fastrack : 20 Days

Crash : 10 Days

Advance Digital Marketing

Regular : 6 Months

Fastrack : 3 Months

Crash : 2 Months

React JS

Regular : 45 Days

Fastrack : 20 Days

Crash : 7 Days

Laravel

Regular : 45 Days

Fastrack : 20 Days

Crash : 10 Days

Front End Developer

Regular : 7 Month

Fastrack : 4 Month

Crash : 2 Month

Related Blogs

Request For Demo