CSS - Children

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.

Once you have defined a child selector you can refine that selection even further using the CSS pseudo-selector first child.

Defining the first child:

div > p:first-child { background-color : #00f; }
This means that the first paragraph in a div element would have the background color of blue, but the rest would keep the default background color.

The first-child pseudo-selector is not supported in IE 6 and lower for Windows or Netscape 4 for Windows. It did work in Safari and Internet Explorer 5.2 for Macintosh.Children