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.
Examples
In the following example, the selector matches any <p> element that is the first child of a
<div> element, and indents the first paragraph inside a div element:
div > p:first-child
{
text-indent:25px
}
The selector above will match the first <p> inside the <div> in the following
HTML:
<div>
<p>
First paragraph in div.
This paragraph will be indented.
</p>
<p>
Second paragraph in div.
This paragraph will not be indented.
</p>
</div>
but it will not match the <p> inside this <div>:
<div>
<h1>Header</h1>
<p>
The first paragraph inside the div.
This paragraph will not be indented.
</p>
</div>
|
In the following example, the selector matches any <em> element that is the first child of a
<p> element, and sets the font-weight to bold for the first em inside a p element:
p:first-child em
{
font-weight:bold
}
For example, the <em> in the HTML below is the first child of the paragraph:
<p>I am a <em>strong</em> man.</p>
|
In the following example, the selector matches any <a> element that is the first child
of any element, and sets the text-decoration to none:
a:first-child
{
text-decoration:none
}
For example, the first <a> element in the HTML below is the first child of the
paragraph and will not be underlined. The second <a> in the paragraph will be underlined:
<p>
<a href="http://www.w3schools.com">Visit W3Schools!</a>
<a href="http://www.w3schools.com">Visit W3Schools!</a>
</p>
|
Try-It-Yourself Demos
:first-child
(does not work in IE unless <!DOCTYPE> is
declared)
This example demonstrates the use of the :first-child pseudo-class.
Complete CSS Reference
Add automated outbound phone calls to your application!
 |
|
Enhance your project with this inexpensive reliable Web Service. Phone calls can be sent as pre-recorded sound files,
text to speech, or by using a combination of both. You can also
change call flow based on interaction.
Phone Notify! is being utilized for fraud prevention, emergency notification calls, courtesy calls, automated telemarketing calls, voice broadcasts, automated dialers, appointment reminders and more.
50 FREE phone calls for W3School users >
|
|