# :first-child Selector

## first-child ( ) version added: 1.1.4

Description: Selects all elements that are the first child of their parent.

While :first matches only a single element, the `:first-child` selector can match more than one: one for each parent. This is equivalent to `:nth-child(1)`.

## Examples:

#### Example: Finds the first span in each matched div to underline and add a hover state.

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>css demo</title>

      <style>

      span {
        color: #008;
      }
      span.sogreen {
        color: green;
        font-weight: bolder;
      }

      </style>

      <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    </head>
    <body>

    <div>
      <span>John,</span>
      <span>Karl,</span>
      <span>Brandon</span>
    </div>
    <div>
      <span>Glen,</span>
      <span>Tane,</span>
      <span>Ralph</span>
    </div>

    <script>

    $( "div span:first-child" )
      .css( "text-decoration", "underline" )
      .hover(function() {
        $( this ).addClass( "sogreen" );
      }, function() {
        $( this ).removeClass( "sogreen" );
      });

    </script>

    </body>
    </html>

#### Demo: