<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 구조 선택자</title>
<!-- CDN으로 jQuery 라이브러리 연결하기 - https://cdnjs.com/libraries/jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
</head>
<body>
<ul id="menu">
<li>html/css</li>
<li>Javascript</li>
<li>제이퀄</li>
<li>부트스트랩</li>
<li>Ajax</li>
<li>JSP</li>
</ul>
<ul >
<li>위치 선택자</li>
</ul>
<script>
$(function (){
//위치 선택자
$("#menu>li:first").css('color','red')
$("#menu>li:last").css('color', 'lime')
//**주의** 홀수번째, index(even): 0, 2, 4, 6 **주의**
$("#menu>li:even").css('background', 'pink') //홀수번째 0,1,2,3,
//**주의** 짝수번째, index(odd): 1, 3, 5, 7
$("#menu>li:odd").css('background', 'red') //홀수번째 0,1,2,3,
//li의 부모중 자식이 1개인 경우를 선택
$("li:only-child").css('background-color', 'orange');
//index를 선택자
$("#menu li").slice(3).css('font-weight', 'bold'); //index가 3부터 선택
$("#menu li").eq(2).css('font-size','2em'); //index가 2인 위치를 li를 선택
// index 위치보다 크거나 작은 위치의 객체 선택
//gt, lt
$('#menu li:lt(3)').css('border-radius','10px'); //index가 2인 위치를 li를 선택
$('#menu li:gt(3)').css('border-radius','10px 0px'); //
})
</script>
</body>
</html>
결과
풀스택eDot