<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>
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", "lightgray");
    (function upDown() {
        $("h2").slideToggle(2000, upDown);
    })();
    $(":animated").css("border","4px solid darked");
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js