Slide 5.22: CSS pseudo-class

CSS Pseudo-Class (Cont.)

CSS—The :first-child Pseudo-Class
The :first-child pseudo-class matches a specified element that is the first child of another element. Note that for :first-child to work in IE, a <!DOCTYPE> must be declared.

Match the first element

In the example below, the selector matches any  element that is the first child of any element:


<html> <head> <style type="text/css"> p:first-child { color:blue; } </style> </head> <body bgcolor="#EDF3FE"> <p>I am a strong man.</p> <p>I am a strong man.</p> </body> </html>

Match the first element in all elements

In the following example, the selector matches the first  element in all  elements:


<html> <head> <style type="text/css"> p > i:first-child { font-weight:bold; } </style> </head> <body bgcolor="#EDF3FE"> <p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p> <p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p> </body> </html>

Demonstration
The following demonstration shows how the script of HTML and CSS is displayed on the Web:


<html> <head> <style type="text/css"> p:first-child i { color:blue; } </style> </head> <body bgcolor="#EDF3FE"> <p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p> <p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p> <p><b>Note:</b> For :first-child to work in IE, a DOCTYPE must be declared.</p> </body> </html>