The CSS reference

":first-child" - css pseudo-class (v. css 2)

  • Will add a style to an element that is the first child of another element
  • HTML usage: all elements
  • Browsers that support the :first-child - pseudo-class :
    Internet Explorer Mozilla Firefox Opera Google Chrome Apple Safari
    Browser deviation:
    • To work in IE, a DOCTYPE must be declared.
Typical usage:
div > p:first-child { text-indent: 0 }
/* This selector would match the P
inside the DIV of the following fragment: */
<P> The last P before the note.
<DIV class="note">
   <P> The first P inside the note.
</DIV>

Pseudo-class ":first-child" example:

<!DOCTYPE HTML >
<html>
  <head>
    <title>Page title</title>
    <style type="text/css">
      p b:first-child {
        background-color: #0000FF;
        color: #FFFF00; }
      </style>
    </head>
    <body>
      <h2>Header <i style="display: inline-block;">h2</i> text</h2>
    <p>The first <b>bold</b> text got special color(s)
      but not the second <b>bold</b> text. <p>
    <p><b>Note:</b> For :first-child to work in
      IE, a DOCTYPE must be declared.</p>
  </body>
</html>

Another pseudo-class ":first-child" example:

<!DOCTYPE HTML >
<html>
  <head>
    <title>Page title</title>
    <style type="text/css">
      div > p:first-child { background-color: grey; }
    </style>
  </head>
  <body>
    <p> The last P before the note.
    <div class="note">
      <p> The first P inside the note.
    </div>
  </body>
</html>
© 2010 by Finnesand Data. All rights reserved.
This site aims to provide FREE programming training and technics.
Finnesand Data as site owner gives no warranty for the correctness in the pages or source codes.
The risk of using this web-site pages or any program codes from this website is entirely at the individual user.