Definition The :first-child pseudo-class adds a special style to an element that is the first child of some other element. Note: For :firs...
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
