Positional Slectors(ポジションセレクター） [jQuery]
Positional Slectors(ポジションセレクター）は、特定のパターンを選択するセレクターです。
nth-childは、１からカウントしていきますが、その他はすべてゼロからカウントしていきます
| セレクター | 意味 | 例 |
| :first | ページの中の最初の要素選択 | td:first ページの中の最初のtd要素 |
| :last | ページの中の最後の要素選択 | td:last ページの中の最後のtd要素 |
| :first-child | 最初の子要素 | td:first-child 子要素tdの最初を選択 |
| :last-child | 最後の子要素 | td:last-child 子要素tdの最後を選択 |
| :only-child | 子要素が一つの場合に選択される | div a:only-child div中にa要素が一つしかないものを選択 |
| :nth-child(n) | ｎ番目の子要素（１から始まる） | td:nth-child(2) 子要素tdの２番目を選択 |
| :nth-child(even|odd) | 子要素の中で、偶数番目（even)や奇数番目（odd)を選択 | td:even 子要素tdの偶数番目を選択 |
| :nth-child(Xn) | X個おきに選択 | td:3n 3個おきに選択 |
| :even and :odd | 偶数（even) 、奇数(odd)の要素を選択 | td:even tdの偶数番目を選択 |
| :eq(n) | n番目の要素を選択（最初はゼロ番から始まる） | td:eq(5) 5番目のtdを選択 |
| :gt(n) | n番の位置より後の要素を選択（最初はゼロ番から始まる） | td:gt(5) 5番目より後の要素を全部選択 |
| :lt(n) | n番の位置より前の要素を選択（最初はゼロ番から始まる） | td:gt(5) 5番目より前の要素を全部選択 |
[サンプル]
テーブルの行をストライプ状に色を変えて表示する。
HTML
<table id="fruits">
<thead>
<tr>
<th>英語</th>
<th>日本語</th>
</tr>
</thead>
<tbody>
<tr>
<td>apple</td>
<td>リンゴ</td>
</tr>
<tr>
<td>orange</td>
<td>オレンジ</td>
</tr>
<tr>
<td>banana</td>
<td>バナナ</td>
</tr>
<tr>
<td>pineapple</td>
<td>パイナップル</td>
</tr>
<tr>
<td>watermelon</td>
<td>スイカ</td>
</tr>
<tr>
<td>strawberry</td>
<td>イチゴ</td>
</tr>
<tr>
<td>lemon</td>
<td>レモン</td>
</tr>
</tbody>
</table>
JavaScript
$(function(){
$('table#fruits tbody tr:even').css("background-color", "#cccccc");
});
ストライプ状に表示する方法は、ストライプ状にクラス設定をしてCSSを一気に適用するという方法もあります。
ブックマーク登録：
0 user
0 user
0 user
(No Ratings Yet)
Loading ...
0 user
0 user
0 user (No Ratings Yet) Loading ...
