CSS3のnth-childを使って添付画像のような表を作りたいと思っています。条件は以下です。・奇数行、偶数行で背景色を変える。・C列だけ背景を透過させる。・classは使わない。 # クラスを使わないのはnth-childの勉強のためで、特に意味はないです。 # 特定列だけ強調させる技はExcelでもよく使うので、楽にできればいいなぁ程度。以下のようなコードを書いてみましたが、背景透過されませんでした。これは、の宣言がの!importantよりも優先されるということでしょうか？ tr:nth-child(odd) { background:#aaFFFF} tr:nth-child(even) { background:#ddffFF} td:nth-child(3) { background:transparent!important} A1 B1 C1 D2 A2 B2 C2 D2 A3 B3 C3 D3 A4 B4 C4 D4

nth-childをtrとtdに同時に使うと...

解決済

質問者：qoozy
質問日時：2011/08/02 14:27
回答数：5件

CSS3のnth-childを使って添付画像のような表を作りたいと思っています。
条件は以下です。

・奇数行、偶数行で背景色を変える。
・C列だけ背景を透過させる。
・classは使わない。

# クラスを使わないのはnth-childの勉強のためで、特に意味はないです。
# 特定列だけ強調させる技はExcelでもよく使うので、楽にできればいいなぁ程度。

以下のようなコードを書いてみましたが、背景透過されませんでした。
これは、<TR>の宣言が<TD>の!importantよりも優先されるということでしょうか？

<html>
<body bgcolor="#ddccbb">
<style type="text/css">
tr:nth-child(odd) { background:#aaFFFF}
tr:nth-child(even) { background:#ddffFF}
td:nth-child(3) { background:transparent!important}
</style>
<table border=1>
<tr>
<td>A1</td>
<td>B1</td>
<td>C1</td>
<td>D2</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>C2</td>
<td>D2</td>
</tr>
<tr>
<td>A3</td>
<td>B3</td>
<td>C3</td>
<td>D3</td>
</tr>
<tr>
<td>A4</td>
<td>B4</td>
<td>C4</td>
<td>D4</td>
</tr>
</table>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： ORUKA1951
回答日時：2011/08/02 15:51

当然ですが、透過されるときは、その下にある色が透けて見えます。

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">

＿</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>

- 0
- 件

通報する

この回答へのお礼

そうでした、TRが下にいたのですね。色をつけるならできました。ありがとうございました。

通報する

お礼日時：2011/08/03 08:53

No.5

回答者： taloo
回答日時：2011/08/03 02:59

tdの背景が透過されて、trの色が見えている

という状態では？

たぶん、望まれてるのはこうではないかと。
（!important不要だと思います）

tr:nth-child(odd) td { background:#aaFFFF}
tr:nth-child(even) td { background:#ddffFF}
td:nth-child(3) { background:transparent}

- 0
- 件

通報する

この回答へのお礼

おっしゃる通りでした。
td:nth-child(3) { background:#FFFFFFF}
こうすると動きますね。簡潔なお答え感謝ですが、他の方が早かったのでそちらにベストアンサーさせていただきます。
ありがとうございました。

通報する

お礼日時：2011/08/03 08:55

No.4

回答者： ORUKA1951
回答日時：2011/08/02 18:08

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は利かないはずです。

- 0
- 件

通報する

No.3

回答者： ORUKA1951
回答日時：2011/08/02 16:06

言いながら詳細度の計算間違えてた(^^)要素セレクタはC=1でしたね。

(CSS2.1以降。CSS2と計算方法が違う--というか説明が違う--現在CSS3で使われているのはCSS2.1と同じ)style属性がA=1になった）