:first-child

Girilen seçiciye göre barındırılan ilk nesneyi verir. Her zaman ki gibi daha iyi anlaşılır olabilmesi için basit bir örnek verelim.

HTML Kodlarımız

<div>
  <span>Ozan</span>
  <span>Erkan</span>
  <span>Emin</span>
</div>
<div>
  <span>OZAN</span>
  <span>ERKAN</span>
  <span>EMİN</span>
</div>

CSS

span{
    color: #000;
    display: block;  
}
span.hover {
    color: green;
    font-weight: bolder;  
}
div {
	margin-top:20px
}

JS

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

Js de yazdığım kod kısmında her div içindeki spanların css’lerini alt çizili yapıyoruz ilk önce sonra hover durumuna geçtiğinde ise tüm spanlara hover classının özelliklerini ekliyoruz.

Ön izleme -> http://codepen.io/AycanB/pen/JoogXJ

Kaynak -> jQuery :first-child nedir ? nasıl kullanılır ?