This page is part of the CSS Guide.
< Child selectors | Adjacent selectors >
First child selectors select a specified element if, and only if, it is the first element contained by its parent element. It doesn't matter what this parent element is.
[edit] Syntax
The first child selector has a syntax much like a pseudo element selector. It's not a pseudo element however because while the first line or the first letter of an element are not actually HTML elements, the first child is itself an HTML element. The syntax is a selector (not necessarily a type selector), followed by :first-child
For example p:first-child selects any paragraph when it is the first element contained by its parent.
Consider the following situation
<div class="introduction"> <p>...</p> <p>...</p> </div>
The first-child selector above will only select the first paragraph in the <div>.
On the other hand it will not select anything in the code below.
<div class="introduction"> <table>...</table> <p>...</p> </div>
In this second example the <table> element is the first child.
[edit] Use
Think of the following scenario. We have each chapter of a book as a web page. Where the chapter is divided into sections, we have created a <div>. Within these <div>s we have the content of our chapter in paragraphs. Commonly, the first paragraph of a section appears differently from the remainder of the paragraphs of the section. One thing we could do is add a special class, say first-paragraph and mark up each of the first paragraphs in the HTML using this class. But better, we can use first child selectors to save us the trouble - we don't need to make any changes to the HTML at all. This also means if the chapter is later edited, to remove certain paragraphs, or rearrange their order, we needn't re-edit the source. Further, by marking up each first paragraph as being of class first-paragraph, we are subtly introducing appearance into our HTML, which as we have seen is to be avoided.
By way of example, the selector for the above selection of each paragraph when it is a first child would be p:first-child.
[edit] Browser support
| Internet Explorer | Mozilla Firefox | Safari | Opera | |||||||
| 5.5 | 6.0 | 7.0 | 1.5 | 2 | 3 | 1.3 | 2 | 3 | iPhone | 9.5 |
| Not supported | Not supported | Buggy support: if an element is dynamically inserted, IE7 will ignore it for the purposes of this selector. | Buggy support: if an element is dynamically inserted, FF1.5 will ignore it for the purposes of this selector. | Buggy support: if an element is dynamically inserted, FF2 will ignore it for the purposes of this selector. | Buggy support: if an element is dynamically inserted, FF3 will ignore it for the purposes of this selector. | Buggy support: if an element is dynamically inserted, Safari 1.3 will ignore it for the purposes of this selector. | Buggy support: if an element is dynamically inserted, Safari 2 will ignore it for the purposes of this selector. | Buggy support: if an element is dynamically inserted, Safari 3 will ignore it for the purposes of this selector. | Buggy support: if an element is dynamically inserted, Safari 3 (iPhone) will ignore it for the purposes of this selector. | Supported |
This page is part of the CSS Guide.
< Child selectors | Adjacent selectors >