みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

CSS スタイルを子要素の子要素に継承させたくない

スタイルシートについてまだ初心者なため質問させてください。

以下のようにテーブルのボーダーのスタイルを子要素(<table><td>)にスタイルを継承(?)させているのですが、この方法だと子要素の子要素(<table><td><table><td>)に対しても継承されてしまいます。

table.border { border-style:solid; border-width: 1px 1px 1px 1px; border-collapse: collapse; }
table.border td { border-style:solid; border-width: 1px 1px 1px 1px; }

table.border > td {…} という指定の方法もあるようですが、こちらは対応しているブラウザが乏しいようで事実上使用できません。

子要素の子要素に対して以下のクラスを指定しても継承が優先されるためか反映されませんでした。

table.none{border-style:none;}
table.none td{border-style:none;}

HTMLタグに直接以下のように指定しても同様でした。

<table style="border-style:solid;">

どこかのサイトでは継承をリセットする必要があるような事が書いてあったような気がします。

もちろん継承を利用せず<table>および<td>個々にクラスを指定すれば(不必要なタグには指定しなければ)可能だと思いますが、これだと大きなテーブルの場合に非効率で悩んでいます。

どのようにすれば子要素の子要素にスタイルを継承させないようにできるでしょうか?

投稿日時 - 2007-11-27 12:29:27

QNo.3550790

すぐに回答ほしいです

質問者が選んだベストアンサー

微妙に把握してませんがこう?

table.border table.none td {
border:0px none;
}

「css 優先順位」などで検索するといろいろヒットしますよ

投稿日時 - 2007-11-27 17:48:08

お礼

以下のコードで上手く行きました!
ありがとうございます!
クラスにクラスを重ねて指定できるんですね。
勉強になりました。

>「css 優先順位」などで検索するといろいろヒットしますよ
ありがとうございます。
いろいろ調べてみます。

<style>

table.border table.none td { border:0px none; }

table.border{ border-collapse: collapse; }
table.border td{ border:1px solid; }

</style>

<table class="border">
<tr>
<td>
TEST
</td>
<td>
<!-- 子要素1 -->
<table>
<tr>
<td>
A1
</td>
<td>
B1
</td>
<td>
C1
</td>
</tr>
</table>
</td>
<td>
<!-- 子要素2 -->
<table class="none">
<tr>
<td>
A2
</td>
<td>
B2
</td>
<td>
C2
</td>
</tr>
</table>
</td>
</tr>
</table>

投稿日時 - 2007-11-27 20:32:51

ANo.2

このQ&Aは役に立ちましたか?

2人が「このQ&Aが役に立った」と投票しています

回答(3)

ANo.3

table.none td {
border:none;
}

table.border td{
border:1px solid;
}
より「後に(下に)」書けばいいのでは。

投稿日時 - 2007-11-27 19:18:52

お礼

ありがとうございます!
以下のコードで動作しました!
このコードでは「table.none td」を「table.border」の前にもってくるだけで動作しなくなってしまいます。

先に書くか後に書くかで動作が変わるとは思いませんでした…。
勉強になります。

<style>

table.border{ border-collapse: collapse; }
table.border td{ border:1px solid; }

table.none td { border:0px none; }

</style>

<table class="border">
<tr>
<td>
TEST
</td>
<td>
<!-- 子要素1 -->
<table>
<tr>
<td>
A1
</td>
<td>
B1
</td>
<td>
C1
</td>
</tr>
</table>
</td>
<td>
<!-- 子要素2 -->
<table class="none">
<tr>
<td>
A2
</td>
<td>
B2
</td>
<td>
C2
</td>
</tr>
</table>
</td>
</tr>
</table>

投稿日時 - 2007-11-27 20:36:48

ANo.1

たとえばこんな風で?

<style>
table.border td table td{
border:0px solid;
}
table.border{
border-collapse: collapse;
}
table.border td{
border:1px solid;
}
</style>

<table class="border">
<tr>
<td>
<table>
<tr>
<td>
test
</td>
</tr>
</table>
</td>
</tr>
</table>

投稿日時 - 2007-11-27 13:37:47

補足

説明がわかりづらく申し訳ありません。
ソースまでご用意いただきありがとうございます。
はじめからHTMLソースを示せばよかったです。

以下のコードで<table class="none">がうまくいかないので困っています。これを成功させるのはどのように指定すればよいのでしょうか。

<style>
table.none td {
border:0px none;
}
//table.border td table td{
//border:0px none;
//}
table.border{
border-collapse: collapse;
}
table.border td{
border:1px solid;
}
</style>

<table class="border">
<tr>
<td>
TEST
</td>
<td>
<!-- 子要素1 -->
<table>
<tr>
<td>
A1
</td>
<td>
B1
</td>
<td>
C1
</td>
</tr>
</table>
</td>
<td>
<!-- 子要素2 -->
<table class="none">
<tr>
<td>
A2
</td>
<td>
B2
</td>
<td>
C2
</td>
</tr>
</table>
</td>
</tr>
</table>

教えていただいた「table.border td table td」で目的は果たせるのですが、「table.border td table td」の時もあれば、「table.border td table td table td」の時もあるので目的の子要素の階層を動的に指定したいと考えています。
また、同じ階層の子要素でもそのまま継承したいものとそうではないものがあります。

そもそも親要素が優先されるというのがスタイルシートの構造として疑問なのですが、そういうものなのでしょうか…。

投稿日時 - 2007-11-27 17:06:33

お礼

問題は無事解決する事ができました。
ソースまでご用意いただきありがとうございました。
また、最初に回答を書き込んでいただきありがとうございました。

投稿日時 - 2007-11-27 20:39:30

あなたにオススメの質問