CSS - Pseudo-class :first-child


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.


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;
         <p>First paragraph in div. This paragraph will be indented</p>
         <p>Second paragraph in div. This paragraph will not be  indented</p>
      <p>But it will not match the paragraph in this HTML:</p>
         <p>The first paragraph inside the div.This paragraph will not be effected.</p>

This will produce following result −