<body>
<h1>제목1</h1>
<h1>제목2</h1>
<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>table {
border-collapse: collapse;
width: 100%;
}
td {
border: 1px solid #333;
}
li {
color: white;
margin: 5px;
}$(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", "white");
(function upDown(){
$("h2").slideToggle(2000,upDown);
})();
$(":animated").css("border","1px solid darked");
});
External CSS
This Pen doesn't use any external CSS resources.