$(function () { // :first $("#b1").click(function () { $("#tab1 td:first").css("backgroundColor", "red"); }); // :last $("#b2").click(function () { $("#tab1 td:last").css("backgroundColor", "yellow"); }); // :even $("#b3").click(function () { $("#tab2 td:even").css("backgroundColor", "red"); }); // :odd $("#b4").click(function () { $("#tab2 td:odd").css("backgroundColor", "yellow"); }); // :lt(4) $("#b5").click(function () { $("#tab3 td:lt(4)").css("backgroundColor", "blue"); }); // :eq(4) $("#b6").click(function () { $("#tab3 td:eq(4)").css("backgroundColor", "red"); }); // :gt(4) $("#b7").click(function () { $("#tab3 td:gt(4)").css("backgroundColor", "yellow"); }); // :not(:eq(4)) $("#b8").click(function () { $("#tab4 td:not(:eq(4))").css("backgroundColor", "red"); }); // :header $("#b9").click(function () { $(":header").css("border", "solid 1pt black"); }); });
<div> <input id="b1" type="button" value=":first" /> <input id="b2" type="button" value=":last" /> <table id="tab1" border="1"> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> </tr> </table> </div> <br /> <div> <input id="b3" type="button" value=":even" /> <input id="b4" type="button" value=":odd" /> <table id="tab2" border="1"> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> </tr> </table> </div> <br /> <div> <input id="b5" type="button" value=":lt(4)" /> <input id="b6" type="button" value=":eq(4)" /> <input id="b7" type="button" value=":gt(4)" /> <table id="tab3" border="1"> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> </tr> </table> </div> <br /> <div> <input id="b8" type="button" value=":not(:eq(4))" /> <input id="b9" type="button" value=":header" /> <table id="tab4" border="1"> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> </tr> </table> <h1>h1</h1> <h2>h2</h2> <h3>h3</h3> <h4>h4</h4> <h5>h5</h5> <h6>h6</h6> </div>