重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

電子書籍の厳選無料作品が豊富！

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

解決済

  • 質問者：qoozy
  • 質問日時：
  • 回答数：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>

「nth-childをtrとtdに同時に使」の質問画像
通報する

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

質問の本文を隠す

A 回答 (5件)

No.2ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

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


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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2011/08/03 08:53

No.5

  • 回答者： taloo
  • 回答日時：

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


という状態では？


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

tr:nth-child(odd) td { background:#aaFFFF}
tr:nth-child(even) td { background:#ddffFF}
td:nth-child(3) { background:transparent}
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2011/08/03 08:55

No.4

  • 回答者： ORUKA1951
  • 回答日時：

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は利かないはずです。
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： ORUKA1951
  • 回答日時：

言いながら詳細度の計算間違えてた(^^)要素セレクタは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)}
-->
    • good
    • 0
    • 件
通報する

No.1

できるかどうか検討してないが、



この図、どう？
http://www.w3.org/TR/CSS21/tables.html#table-lay …
    • good
    • 0
    • 件
通報する
この回答へのお礼

これは初めて見ました。あとでじっくり勉強してみます。ありがとうございます。

通報する
お礼日時：2011/08/03 08:56

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報