<!DOCTYPE html>
<html>
<head>
<style>
span { color:#008; }
span.sogreen { color:green; font-weight: bolder; }
</style>
<script src="http://code.jquery.com/jquery-1.4.4.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>
## :first-child 는 자식 요소 중에에 첫번째로 위치한 요소를 찾는 선택자입니다. (:last-child는 마지막에 위치한 자식 요소)
:first-child 는 :nth-child(1) 로 대체될 수 있습니다.
## :first (<->':last' 는 찾은 요소 중에 첫번째를 찾는 선택자입니다.
:eq(0) 이나 :lt(1) 과 같이 바꿔 사용할 수 있습니다.
## :first-child는 1개 이상의 요소를 선택할 수 있다는 것이고 :first 는 단 하나의 요소만 선택할 수 있습니다.
'# Work > └ jQuery' 카테고리의 다른 글
| show & hide (0) | 2012.04.26 |
|---|---|
| jquery 내용 정리 (0) | 2012.04.18 |
| 게시판 리스트 짝수, 홀수 찾아 스타일 주기 (1) | 2012.04.17 |
| 클래스명으로 선택하여 스타일 주기 (2) | 2012.04.16 |
| jQuery 기초 (0) | 2012.01.04 |