<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>위치 탐색 선택자</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function() {
$('*').css('margin','0').css('padding','0').css('box-sizing','border-box');
$('ul').css('margin','50px auto').css('width','300px');
$('ul li').css('list-style','none').css('text-align','center').css('color','white');
$('#menu li:nth-child(2)').css('color','#333');
// 메뉴 박스
$('#menu li:first').css('background','#9CF'); //첫번째 요소만 선택
$('#menu li:last').css('background','#06C'); //마지막 요소만 선택
// 컨텐츠 박스
$('#content li:odd').css('background','#9CF'); //짝수 번째 요소만 선택
$('#content li:even').css('background','#06C'); //홀수 번째 요소만 선택
});
</script>
</head>
<body>
<ul id="menu">
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
</ul>
<ul id="content">
<li>content1</li>
<li>content2</li>
<li>content3</li>
<li>content4</li>
</ul>
</body>
</html>