- ベストアンサー
CSS3のnth-childを使って表の奇数行と偶数行の背景色を変え、特定の列を透過する方法は？
- CSS3のnth-childを使って表の奇数行と偶数行の背景色を変える方法を説明します。また、特定の列を透過させる方法についても解説します。
- 奇数行と偶数行に異なる背景色を設定するには、tr:nth-child(odd)とtr:nth-child(even)を使用します。透過させたい列の要素を指定するには、td:nth-child()を使用します。
- ただし、背景を透過させるためには、transparentを指定するだけではなく、!importantを付ける必要があります。これによって、他のスタイルの優先順位よりも高くなります。
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
当然ですが、透過されるときは、その下にある色が透けて見えます。 trの色を決めているのですから、tdが透明になると、trの色が透けて見えますから、結果的に変化しない!!! きちんとtdの色を子孫セレクタで指定すると、詳細度が同じなら後述のもので上書きされます。 擬似要素は詳細度はd=1として計算します。 セレクタやプロパティの勉強の前に、詳細度、継承、カスケーディングの知識をしっかり身に着けるのが肝要です。なぜなら、カスケーディングスタイルシートですからね。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- table[summary~="test1"] tr td { /* 詳細度[C=4] */ ＿background-color:rgb(255,200,200) } table[summary~="test1"] tr:nth-child(2n) td {/* 詳細度[C=5] */ ＿background-color:#ddffFF } table[summary~="test1"] tr td:nth-child(3){ /* 詳細度[C=5] */ ＿background-color:transparent; } table[summary~="test2"] tr td { background-color:rgb(255,255,200)} table[summary~="test2"] tr:nth-child(2n) td { background-color:rgb(200,200,255)} table[summary~="test2"] tr td:nth-child(3){ background-color:rgb(200,255,200)} --> ＿</style> </head> <body> ＿<h1>サンプル</h1> ＿<table border="1" summary="test1"> ＿＿<tr> ＿＿＿<td>001</td><td>002</td><td>003</td><td>004</td> ＿＿</tr> ＿＿<tr> ＿＿＿<td>001</td><td>002</td><td>003</td><td>004</td> ＿＿</tr> ＿＿<tr> ＿＿＿<td>001</td><td>002</td><td>003</td><td>004</td> ＿＿</tr> ＿＿<tr> ＿＿＿<td>001</td><td>002</td><td>003</td><td>004</td> ＿＿</tr> ＿</table> ＿<table border="1" summary="test2"> ＿＿<tr> ＿＿＿<td>001</td><td>002</td><td>003</td><td>004</td> ＿＿</tr> ＿＿<tr> ＿＿＿<td>001</td><td>002</td><td>003</td><td>004</td> ＿＿</tr> ＿＿<tr> ＿＿＿<td>001</td><td>002</td><td>003</td><td>004</td> ＿＿</tr> ＿＿<tr> ＿＿＿<td>001</td><td>002</td><td>003</td><td>004</td> ＿＿</tr> ＿</table> </body> </html>
その他の回答 (4)
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
tdの背景が透過されて、trの色が見えている という状態では？ たぶん、望まれてるのはこうではないかと。 （!important不要だと思います） tr:nth-child(odd) td { background:#aaFFFF} tr:nth-child(even) td { background:#ddffFF} td:nth-child(3) { background:transparent}
お礼
おっしゃる通りでした。 td:nth-child(3) { background:#FFFFFFF} こうすると動きますね。簡潔なお答え感謝ですが、他の方が早かったのでそちらにベストアンサーさせていただきます。 ありがとうございました。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
HTMLにある、colgroup(構造化要素)、col要素ですが、本来ならcolgroupで指定してもよさそうなものですが、それに対応したブラウザは少ないようです。 <table> <colgroup span="2"> <colgroup span="1" class="a"> <colgroup span="1"> <tr> <td></td><td></td><td></td><td></td> </tr> </table> ですので、CSS2.1のcolumngroupは利かないはずです。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
言いながら詳細度の計算間違えてた(^^)要素セレクタはC=1でしたね。(CSS2.1以降。CSS2と計算方法が違う--というか説明が違う--現在CSS3で使われているのはCSS2.1と同じ)style属性がA=1になった） <!-- table[summary~="test1"] tr td { /* 詳細度[C=1,D=3] */ ＿background-color:rgb(255,200,200) } table[summary~="test1"] tr:nth-child(2n) td {/* 詳細度[C=1 D=4] */ ＿background-color:#ddffFF } table[summary~="test1"] tr td:nth-child(3){ /* 詳細度[C=1 D=4] */ ＿background-color:transparent; } table[summary~="test2"] tr td { background-color:rgb(255,255,200)} table[summary~="test2"] tr:nth-child(2n) td { background-color:rgb(200,200,255)} table[summary~="test2"] tr td:nth-child(3){ background-color:rgb(200,255,200)} -->
- himajin100000
- ベストアンサー率54% (1660/3060)
できるかどうか検討してないが、 この図、どう？ http://www.w3.org/TR/CSS21/tables.html#table-layers
お礼
これは初めて見ました。あとでじっくり勉強してみます。ありがとうございます。
お礼
そうでした、TRが下にいたのですね。色をつけるならできました。ありがとうございました。