PSEUDO-CLASSES: first-child
first-child
 
Compatibility: Currently not supported by any browser
Version: Level 1
 
The first-child pseudo-class is used to apply style to the first element, called the first-child element, that is contained inside a specific parent element.
 
A pseudo-class is assigned to a selector via following syntax:
 
selector:pseudo-class { property: value; ...; }
 
A pseudo-class can also be used with the value assigned as a class to a selector:
 
selector.class:pseudo-class { property: value; ...; }
 
In this example, the first-child element are the pair of opening and closing bold tags that enclose DevGuru.
 
Code:
<html>
<head>
<title>first-child test</title>
<style type="text/css">
p:first-child {color: red;}
</style>
</head>
<body>
<p>
I love <b>DevGuru</b> more than I love <i>ice cream</i>!
</p>
</body>
</html>
 
Simulated output:
 
Output:
I love DevGuru more than I love ice cream!

Copyright 1999-2001 by Infinite Software Solutions, Inc. All rights reserved.
Trademark Information