totn CSS

CSS: descendant selector

This CSS tutorial explains how to use the CSS descendant selector with syntax and examples.

Description

The CSS descendant selector allows you to target an element that is a descendant of an element type. The element does not have to be a direct child, but rather any descendant down the line.

Syntax

The syntax for the :active CSS selector is:

element1 element2 { style_properties }

Parameters or Arguments

element1
The first element type to match.
element2
The second element type to match that must be a descendant of element1.
style_properties
The CSS styles to apply to the targeted element2.

Note

  • The descendant selector uses a space character to target an element that is a descendant of another element.
  • See also the child selector.

Browser Compatibility

The CSS descendant selector has basic support with the following browsers:

  • Chrome
  • Firefox (Gecko)
  • Internet Explorer (IE)
  • Opera
  • Safari (WebKit)

Example

We will discuss the descendant selector below, exploring examples of how to use this selector in CSS.

With <li> tag

Let's look at a CSS descendant example where we apply the descendant selector to the <li> tag.

The CSS would look like this:

ol li { color: red; }

The HTML would look like this:

<ol>
  <li>TechOnTheNet.com</li>
  <ul>
    <li>Oracle/PLSQL</li>
    <li>SQL</li>
    <li>Excel</li>
  </ul>
  <li>CheckYourMath.com</li>
  <li>BigActivities.com</li>
</ol>

The result would look like this (The descendant selector would style the <li> tags as follows):

CSS

In this descendant selector example, all <li> tags that are descendants of the <ol> tag will be styled by the descendant selector (ie: styled with red font). So in the case of the three <li> tags under the <ul> tag:

<li>Oracle/PLSQL</li>
<li>SQL</li>
<li>Excel</li>

Although the three <li> tags are not direct children of the <ol> tag, they are still descendants of the <ol> tag and thus are styled by the descendant selector.

This varies from how the child selector would work if applied to this example.

Share on: