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):
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.
Advertisements