Tutorials Point


  CSS Home

  CSS Reference
  Pseudo Classes & Elements

Copyright © 2014 by tutorialspoint



  Home     References     Discussion Forums     About TP  

CSS Pseudo-class :first-child


previous next AddThis Social Bookmark Button


Advertisements

Description:

The :first-child pseudo-class is used to add special effect to an element that is the first child of some other element.

To make :first-child work in IE <!DOCTYPE> must be declared at the top of document.

Please note that:

  • Pseudo-class names are not case-sensitive.

  • Pseudo-class are different from CSS classes but they can be combined.

Example:

For example, to indent the first paragraph of all <div> elements, you could use this definition:

<style type="text/css">
div > p:first-child
{
text-indent: 25px;
}
</style>
<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 paragraph in this HTML:

<div>
<h3>Heading</h3>
<p>

The first paragraph inside the div.
This paragraph will not be effected.
</p>
</div>

This will produce following result:

First paragraph in div. This paragraph will be indented

Second paragraph in div. This paragraph will not be indented

But it will not match the paragraph in this HTML:

Heading

The first paragraph inside the div.
This paragraph will not be effected.

To Become more comfortable - Do Online Practice



previous next Printer Friendly

Advertisements


  

Advertisements