jQueryで（n）番目（ｎ倍数）の特定要素に処理を加える「:nth-child()」のちょっと便利な使い方｜BLACKFLAG
Webページ上の＜li＞リストなど、 いくつも同じ要素が繰り返されるものに対して、 jQueryを使って、特定の（n）番目の物に処理を加えられる 「:nth-child()」のちょっと便利な使い方の紹介をしてみます。 「:nth-child()」の基礎的な使い方としては 連続している要素のn番目の要素に対して 特定の処理を加えられるというもの。 例えば下記の様なリストがあった場合、 ◆HTML【SAMPLE01】 <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> このリストの3番目の要素のみに 背景色を変えるスクリプトを実行させる場合。 ◆SCRIPT【SAMPLE01】 <script type=
表組の奇数行／偶数行で色分けするCSS3/JS - NoteBook
CSS3では、:nth-child疑似クラスがサポートされました。これを使うと、表組などで奇数行、偶数行それぞれに背景色を付けることなどが簡単にできます。 ただし対応しているブラウザはFireFox3.6, Safari4+, Chrome5+, Opera10.6で、IE6,7,8は対応していません。 しかしながらIEには簡単なJavaScriptで対応することができます。 サンプルはこちら。 CSS3での指定は以下のようになります。 tr:nth-child(odd) td { background-color: #fdfff3; /* 奇数行の背景色 */ } tr:nth-child(even) td { background-color: #f8f8f8; /* 偶数行の背景色 */ } IEではJavaScriptでTR要素にoddクラスやevenクラスを付けます。（後
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
4/4 CSSのnth-childで偶数/奇数行などn番目を装飾する方法 [ホームページ作成] All About![4/4 CSSのnth-childで偶数/奇数行などn番目を装飾する方法 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/7e5c80524767cb55393e0a6d34b718f50c34e6ef/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F3%2F8%2F3%2F7%2F0%2F7%2F201609231530%2Ftopimg_original.png)
| 島のWeb屋より
