CSS Tutorial Lesson 6: Child and Descendent Selectors

We have learned four types of CSS selectors in previous lesson. In this lesson, we shall examine a group of selectors that resemble family members that are known as child and descendant  selectors. We can differentiate them from one another by examining how the elements are related.

6.1 Child Selector

The child selector comprises two elements separated by the greater than sign “>”, the syntax is as follows:

element1>element2{css}

It means that element1 selects or matches element2 if and only if element2 is the direct child of element1.  In another words, it only selects one level down the html structure.

Example 6.1

There are many types of selectors in CSS, as follows:

• Universal Selector




1. Example 1


2. Example 2

Type Selector

1. Example 1


2. Example 2

ID Selector

1. Example 1


2. Example 2

Class Selector

1. Example 1


2. Example 2

The Output
There are many types of selectors in CSS, as follows:

• Universal Selector
  1. Example 1
  2. Example 2
• Type Selector
  1. Example 1
  2. Example 2
• ID Selector
  1. Example 1
  2. Example 2
• Class Selector
  1. Example 1
  2. Example 2

 6.2 Descendent Selector

The descendent selector comprises two elements written side by side, the syntax is as follows:

element1 element2{css}

It means that element1 selects or matches element2 if element2 is a decendent of element1, where element2 includes direct and non direct children, or you can say they are grand children , great grand children and more of element 1. In another words, it selects more than one level down the html structure.

Example 6.2

There are many types of selectors in CSS, as follows:

• Universal Selector




1. Example 1


2. Example 2

Type Selector

1. Example 1


2. Example 2

ID Selector

1. Example 1


2. Example 2

Class Selector

1. Example 1


2. Example 2

The Output
There are many types of selectors in CSS, as follows:

• Universal Selector
  1. Universal Selector>Example 1
  2. Universal Selector>Example 2
• Type Selector
  1. Universal Selector>Example 1
  2. Universal Selector>Example 2
• ID Selector
  1. Universal Selector>Example 1
  2. Universal Selector>Example 2
• Class Selector
  1. Universal Selector>Example 1
  2. Universal Selector>Example 2