CSS :first-child pseudo-class
 Complete CSS Reference
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
{
font-weight:bold
}
</style>
<p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>
<p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>
|
Try it yourself!
Example 2 - Match the first <em> element in all <p> elements
In the following example, the selector matches any <em> element that is the first child of a
<p> element:
<style type="text/css">
p > em:first-child
{
font-weight:bold
}
</style>
<p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>
<p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>
|
Try it yourself!
Example 3 - Match all <em> elements in all first child <p>
elements
In the following example, the selector matches any <em> elements in
<p> elements that are the first child of another element:
<style type="text/css">
p:first-child em
{
font-weight:bold
}
</style>
<p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>
<p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>
|
Try it yourself!
Complete CSS Reference
 |
|
Get Your Diploma!
W3Schools' Online Certification Program is the perfect solution for busy
professionals who need to balance work, family, and career building.
The HTML Certificate is for developers who want to document their knowledge of HTML, XHTML, and CSS.
The ASP Certificate is for developers who want to document their knowledge of ASP, SQL, and ADO.
|
|
HOME
Printer friendly page
