<html lang="ko">
<head>
<meta charset="UTF-8">
<title>기본 필터 선택자</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td {
border: 1px solid #333;
}
li {
color: white;
margin: 5px;
}
</style>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<h1>제목1</h1>
<h2>제목2</h2>
<table>
<caption>기본 필터 선택자</caption>
<colgroup>
<col>
<col>
<col>
</colgroup>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
</tbody>
</table>
<ul>
<li class="bg">내용1</li>
<li class="bg">내용2</li>
<li class="bg">내용3</li>
<li>내용4</li>
</ul>
</body>
</html> $(document).ready(function() {
$("tr:even").css("background", "red");
$("tr:odd").css("background", "orange");
$("td:first").css("background", "yellow");
$("td:last").css("background", "green");
$(":header").css("background", "blue");
$("li:eq(0)").css("background", "navy");
$("li:gt(0)").css("background", "purple");
$("li:lt(3)").css("border", "4px solid gray");
$(":root").css("background", "lightgray");
(function upDown() {
$("h2").slideToggle(2000, upDown);
})();
$(":animated").css("border", "4px solid darkred");
});
External CSS
This Pen doesn't use any external CSS resources.