Latest

recent

CSS :first-child pseudo-class

Definition

The :first-child pseudo-class adds a special style to an element that is the first child of some other element.
Note: For :first-child to work in IE a <!DOCTYPE> must be declared.

Example 1 - Match the first <p> element

In the following example, the selector matches any <p> element that is the first child of any element:

<style type="text/css">
p:first-child
{
color:blue
} 
</style>

<p>I am a strong man.</p>
<p>I am a strong man.</p>

Example 2 - Match the first <i> element in all <p> elements

In the following example, the selector matches the first <i> element in all <p> elements:

<style type="text/css">
p > i:first-child
{
color:blue
} 
</style>

<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>

Example 3 - Match all <i> elements in all first child <p> elements

In the following example, the selector matches all <i> elements in <p> elements that are the first child of another element:

<style type="text/css">
p:first-child i
{
color:blue
} 
</style>

<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>

Goto CSS3 and CSS2 complete reference
CSS :first-child pseudo-class Reviewed by 1000sourcecodes on 09:53 Rating: 5
Powered by Blogger.