totn CSS

CSS: child selector

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

Description

The CSS child selector uses the > character to target an element that is a direct child of an element type.

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 direct child of element1.
style_properties
The CSS styles to apply to the targeted element2.

Note

  • The child selector uses the > combinator to target an element that is a direct child of another element.
  • See also the descendant selector.

Browser Compatibility

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

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

Example

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

With <li> tag

Let's look at a CSS child example where we apply the child 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 child selector would style the <li> tags as follows):

CSS

In this child selector example, only <li> tags that are direct children of an <ol> tag will be styled by the child 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>

They are not direct children of the <ol> tag and therefore are not styled by the child selector. If you wanted them to styled like the other <li> tags, you might want to try using the descendant selector.