• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

7.7. first-child Pseudo-Class

The first-child pseudo-class is an innovation introduced under the CSS2 specification. It is designed to format an object only when it matches the first selected element to appear after another. So if you have a div element as the “parent” and several successive p “child” elements contained within it, this pseudo-class allows you to format only the first paragraph, while leaving subsequent paragraphs alone. Listing 7.5 shows how this can be put to use.

Listing 7.5. first-child Pseudo-Class Example

<html>
<head>
<title>first-child Example</title>
<style>
div > p:first-child {color: navy; font-family: Arial, Helvetica, sans-serif}
body {font-size: 30px;}
</style>
</head>
<body>
<div>
<p>
First sample sentence. It is the first child to follow a 
<code>div</code> element, and so it is formatted according to the
<code>first-rule</code> rule.
</p>
</div>
<div>
<h2>Note:</h2>
<p>
Second sample sentence. The <code>first-child</code> pseudo-class 
doesn't apply in this case.
</p>
</div>
<p>
Third sample sentence. The <code>first-child</code> pseudo-class 
doesn't apply in this case either.
</p>
</body>
</html>


					  


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint