1. Technology

Cascading Style Sheets Child Selectors

Precise Definitions of CSS Styles


In CSS a parent element is an element that contains other elements. All elements that are contained within that parent are called "child" elements. Using the CSS child selector, you can define properties that only affect elements that are children of other specific elements. Every element is a child of another element except the root element, which has no parent.

To select all paragraphs that are children of the <body> tag, you would write:
  body > p { background-color : #00f; }

This is similar to the decendant selector but can only define children, not grandchildren or lower.

You can combine the child selector with other selectors, such as decendants:
  div ul>li p { background-color : #00f; }
This affects a p element that is a decendent of li which is a child of ul which is a decendant of div.

Browser Support

Internet Explorer 6 and lower (Windows) and 4.5 and lower (Macintosh) don't support this selector. Netscape 4 and lower don't support this selector.

©2014 About.com. All rights reserved.