CSS - Pseudo-class :first-child


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:

<html>
   <head>
      <style type="text/css">
         div > p:first-child {
            text-indent: 25px;
         }
      </style>
   </head>
   <body>
      <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>
      <p>But it will not match the paragraph in this HTML:</p>
      
      <div>
         <h3>Heading</h3>
         <p>The first paragraph inside the div.This paragraph will not be effected.</p>
      </div>
   </body>
</html> 

This will produce following result −



Advertisements