## first-child selector

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

- #### version added: 1.1.4jQuery( ":first-child" )

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)`.

## Example:

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
    <!doctype html><html lang="en"><head>  <meta charset="utf-8">  <title>first-child demo</title>  <style>  span {    color: #008;  }  span.sogreen {    color: green;    font-weight: bolder;  }  </style>  <script src="https://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: