first-child

Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported No No Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes No Yes Yes

Short information
CSS CSS2
Applied To all elements
HTML analog No
Reference to specification http://www.w3.org/TR/CSS21/selector.html#first-child

Description
The pseudo-class first-child adds style appearance to the first affiliated element of the selector which is located in the elements tree of the document.

Syntax

Tag:first-child { ... }

Arguments
No.

Example 1.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>first-child</title>
  <style type="text/css">
    B:first-child {
     color: red; /* Red text color */
    }
  </style>
 </head>
 <body>
 
   <p><b>Lorem ipsum</b> dolor sit amet, <b>consectetuer</b> 
   adipiscing <b>elit</b>, sed diem nonummy nibh euismod tincidunt ut lacreet 
   dolore magna aliguam erat volutpat.</p>
   <p><b>Ut wisis enim</b> ad minim veniam, <b>quis nostrud</b> 
   exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea <b>commodo 
   consequat</b>.</p>
 
 </body>
</html>

The result of this example is shown on the figure 1. In this example the pseudoclass "first-child" is added to the selector "B" and sets red color for it. Through container "B" is met in the text three times only first mention will be dedicated red, i.e. the text "Lorem ipsum". In other cases the content of container "B" will be imaged in black color. Everything happens again in the next paragraph because the parent element was changed. That's why "Ut wisis enim" will be dedicated red.


Example 2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>first-child</title>
  <style type="text/css">
   P {
    text-indent: 1em; /* First line indent */
   }
   P:first-child {
    text-indent: 0; /* Remove indent for the first paragraph */
   }
  </style>
 </head>
 <body>
  <p>This story has begone to be forgotten but there were citizens who sometimes told it for new visitors of the city.</p>
  <p>The legend has become detailed and didn't remind about the event that happend really. But no man made up his mind to mention it when the darkness came. </p>
  <p>But one day a stranger came to the city. He was lame in the left leg.</p>
 </body>
</html>

The result of this example is shown on the figure 2. According to printing rules the indent of first line for the first paragraph is not defined but it is added for other ones. The parameter "text-indent" with the indent value "1em" is used for this aim in the example. For changing the style of first paragraph and setting zero indent the pseudoclass "first-child" is added to the selector "B".