忍者ブログ

suzrinブログ

HTML,CSS,Javascript,Nikon D5000での撮影記録あとPCパーツ大人のゲームなどなど
<< DanceMixerベータテストCHU HOME 規制 >>

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

nth-childを使わないで縞々にする方法

私は縞々が好きだ
幅が広い縞々が好きだ
幅の狭い縞々も好きだ

という事でHTMLテーブルをnth-childを使わないで縞々にするtipsを見かけたので(違っ)
first-ciledと隣接セレクタでnth-childの様な指定をするtipsです
自分用メモ

HTMLソースとしては
<table>
<col class="1"><col class="2"><col class="3">
<tr><td>A</td><td>B</td><td>C</td></tr>
<tr><td>A</td><td>B</td><td>C</td></tr>
</table>
と言う感じで

背景と列幅をいじるだけなら<col>のそれぞれのクラスにbackgroundを指定すればいいわけですが
列ごとにフォントサイズを変えたり色を変えたり文字寄せをする事は出来ません
IEはバグで指定が効いちゃったりしますけどね~

ということで便利なnth-child()という疑似セレクタがCSS3には用意されていますが
今のところ使えるのがSafari4とFirefox3.5くらいなのでこれはボツ

グーグル先生に色々聞いてみたところ
なんと
td:first-child + td
first-child疑似セレクタと隣接セレクタの組み合わせで
n番目のtdを好きに指定できちゃうという素敵tipsを発見しました
どこで見たのか忘れてしまったので出展がかけずに申し訳ないです

しかもテーブルの場合は一列目をthにすればfirst-chiledを使わなくてもok
th + td + td
で三列目のtdのみ指定
(IE6は隣接セレクタも使えないのでdmpOTZ)
三列目以降も+tdを増やしていけばOKなのでかなり便利スキル何じゃないでしょうか
IE7以上なら使えますしね
(IE7はバグがあるもののfirst-childも隣接セレクタもつかえるので)

これでいちいちセレクタ打ったりJavascriptでセレクタを生成したりしなくて平気です

PR
この記事にコメントする
お名前
タイトル
メールアドレス
URL
コメント
パスワード   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
この記事へのトラックバック
この記事にトラックバックする:
カレンダー
10 2017/11 12
S M T W T F S
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30
ブログ内検索
ツイッター
フリーエリア
18歳未満には不適切な内容がある場合が有ります閲覧にはご注意ください。 詳しくはりーどみーをご覧くださいお願いします
blogに関する連絡はこちらまで"suzrinあっとまーくmail.goo.ne.jp"
最新コメント
[06/24 kz]
[10/16 haru]
[10/12 haru]
[06/08 nshi]
[11/15 まつかわ]
最新トラックバック
カウンター
クロシェットさんの新作プリズムリコレクションからアイナちゃん!
【プリズム◇リコレクション!】情報ページ公開中!
ストレガさんの新作木洩れ陽のノスタルジーカのフロゥちゃん\(>ヮ<)/
『木洩れ陽のノスタルジーカ』応援中です!
はいぺりよんさんのシストリのるなちー
シストリ抱き枕注文受付中!
フェイバリットさんの新作色とりどりのひかり!
いろとりどりのヒカリ 応援中!!
Chuableさんの新作アステリズム 応援CHU
姉さんに恋をして、姉さんも恋をして、姉さんと恋をした。 アステリズム 応援中!
AXLさんの新作から月海ちゃん応援中!
AXL新作第8弾 2012年春発売予定!
Meteorさんの新作Princess-Styleから一宮菖蒲ちゃん応援中!
『Princess-Style』応援中です
YUZU SOFTさんの新作とSAGAPLANETSさんの新作応援中!
はつドラ合同バナーキャンペーン開催中
loseさんの新作『ものべの』応援中!
ものべの - 夏葉
Favoritさんの新作いろとりどりのセカイ
いろとりどりのセカイ 応援中!!
<< DanceMixerベータテストCHU HOME 規制 >>
忍者ブログ [PR]