$( '.css_test div:first' ) - 클래스명이 css_test 인것의 div 중 첫번째 것을 찾습니다.
$( '.css_test div:first' ).css( 'border-color', 'red' ) - 첫번째 div 의 테두리색을 빨간색으로 바꾸기.
$( '.css_test img:first' ).animate( { left : '-=150', 'opacity' : 0 }, 500, function(){
$(this).remove();
} );
해당 셀렉터의 첫번째 이미지를 찾아서 왼쪽으로 150px 이동시킴과 동시에 투명해 지도록 만들고
애니메이션이 끝나면 해당 이미지를 삭제합니다.
관렴 메서드 : .animate(), .remove()
$( '.css_test div img:first-child' )
- 클래스명이 css_test 인 요소의 div 안의 img 중 첫번째 자식만 찾기
- 각 div 안에 있는 이미지중 첫번째 것들 즉 첫번째 자식만 찾습니다.
- 예제에서는 각 3개의 div 중 첫번째 이미지들이 대상입니다.
- 각 div 가 부모이고 그 안의 첫번째 것을 의미하죠.
$( '.css_test div img:first' )
- 클래스명이 css_test 인 요소의 div 안의 img 중 첫번째 것만 찾기
- 찾아진 이미지를 전체로 놓고 판단하여 첫번째 것만 찾습니다.
- 무조건 첫번째 것만 찾는것이죠.