2024-10-16
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script>
/*
탐색 선택자
1. eq(index) 선택자
==> 지정한 인덱스가 참조(가리키는)하는 요소만 선택하는 선택자.
2. lt(index) 선택자
==> 지정한 인덱스보다 적은(less than) 요소만 선택하는 선택자.
3. gt(index) 선택자
==> 지정한 인덱스 보다 큰(greater than) 요소만 선택하는 선택자.
* 2, 3번 선택자는 기준으로 정한 요소는 포함시키지 않음.
*/
$(function() {
$("ul li:eq(3)").css("background-color", "pink");
$("ul li:lt(3)").css("background-color", "yellow");
$("ul li:gt(3)").css("background-color", "lightgray");
});
</script>
</head>
<body>
<h2>탐색 선택자 - 위치 탐색 선택자</h2>
<ul>
<li>내용1</li>
<li>내용2</li>
<li>내용3</li>
<li>내용4</li>
<li>내용5</li>
<li>내용6</li>
<li>내용7</li>
</ul>
</body>
</html
