![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
スタイルシートについてまだ初心者なため質問させてください。
以下のようにテーブルのボーダーのスタイルを子要素(<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>個々にクラスを指定すれば(不必要なタグには指定しなければ)可能だと思いますが、これだと大きなテーブルの場合に非効率で悩んでいます。
どのようにすれば子要素の子要素にスタイルを継承させないようにできるでしょうか?
No.2ベストアンサー
- 回答日時:
微妙に把握してませんがこう?
table.border table.none td {
border:0px none;
}
「css 優先順位」などで検索するといろいろヒットしますよ
以下のコードで上手く行きました!
ありがとうございます!
クラスにクラスを重ねて指定できるんですね。
勉強になりました。
>「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>
No.3
- 回答日時:
table.none td {
border:none;
}
を
table.border td{
border:1px solid;
}
より「後に(下に)」書けばいいのでは。
ありがとうございます!
以下のコードで動作しました!
このコードでは「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>
No.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>
この回答への補足
説明がわかりづらく申し訳ありません。
ソースまでご用意いただきありがとうございます。
はじめから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」の時もあるので目的の子要素の階層を動的に指定したいと考えています。
また、同じ階層の子要素でもそのまま継承したいものとそうではないものがあります。
そもそも親要素が優先されるというのがスタイルシートの構造として疑問なのですが、そういうものなのでしょうか…。
問題は無事解決する事ができました。
ソースまでご用意いただきありがとうございました。
また、最初に回答を書き込んでいただきありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・「I love you」 をかっこよく翻訳してみてください
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・昔のあなたへのアドバイス
- ・かっこよく答えてください!!
- ・あなたが好きな本屋さんを教えてください
- ・スタッフと宿泊客が全員斜め上を行くホテルのレビュー
- ・【大喜利】【投稿~8/27】 こんなガソリンスタンド二度と来るか!なぜそう思った?
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・【お題】動物のキャッチフレーズ
- ・【お題】甲子園での思い出の残し方
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・「それ、メッセージ花火でわざわざ伝えること?」
- ・自分用のお土産
- ・人生で一番お金がなかったとき
- ・一番好きなみそ汁の具材は?
- ・泣きながら食べたご飯の思い出
- ・ちょっと先の未来クイズ第1問
- ・ゴリラ向け動画サイト「ウホウホ動画」にありがちなこと
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<th>タグを使っても太字にしな...
-
テーブル内のセル間にスペース...
-
CSSで<table>を横に並べるよう...
-
html5のテーブル内でdivのタブ...
-
TABLEのセルの中の文字を行単位...
-
HTML5で、テーブル内tdタグの高...
-
テーブルとテーブルの間隔について
-
フォームタグのプルタウンの隙...
-
同じ幅指定のつもりなのに、ブ...
-
ブロックとテーブルの間の隙間
-
CSSで特定のテーブルだけに...
-
テーブルのhrタグに下線を引く...
-
テーブルタグの中にdivを含めて...
-
ブラウザによってテーブルのセ...
-
html でのテキスト結合について
-
tableタグとformタグの組み合わせ
-
nowrapを指定しても改行される...
-
テーブルの行の高さを指定する...
-
テーブルの任意の列を非表示に...
-
テーブルの行を折りたたみたい...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
TABLEのセルの中の文字を行単位...
-
テーブルとテーブルの間隔について
-
<th>タグを使っても太字にしな...
-
CSSで特定のテーブルだけに...
-
HTML5で、テーブル内tdタグの高...
-
table表を横に並べる際の間隔指定
-
テーブル内のセル間にスペース...
-
同じ幅指定のつもりなのに、ブ...
-
HTML tableのセルにtextareaを...
-
html5のテーブル内でdivのタブ...
-
<fieldset>タグについて
-
(HTML)Tableを任意の位置に置...
-
tableを画面中央に配置する方法
-
画面幅に合わせてテーブルのカ...
-
textareaの外側の文字が下付き...
-
テーブルデータを折り返して表...
-
フォームタグのプルタウンの隙...
-
tableの位置がIEとその他ブラウ...
-
正規表現で「より前」と「より後」
-
tableのcellpadding="0" cellsp...
おすすめ情報