ｃｓｓで一個のテーブルだけにデザインを反映したい

Question

ｃssの編集で、テーブルすべてに反映されてしまって困っています。下記は書籍のサンプルを抜粋したものですが、 /*--------------------------- ▼テーブル -------------------------- */ table { background-color:#000033;} th { background-color:#005890; color:#ffffff; } td { background-color:#ffffff; color:#333333; } /*--------------------------- ▲テーブル -------------------------- */ という設定にしたら、すべてのテーブルに反映されました。このテーブルだけ、という風にしたいのですが、スタイルシート側をどうしたらいいのでしょうか？ちなみに反映したいhtmlファイルのテーブルのソースは下記の感じなのですが、 div とか postとかをtableの前に持っていけばいい？みたいなところまで調べてわかっているのですが、まったくの初心者でなかなかうまくいきません。

・・・略・・・

ORUKA1951 · Accepted Answer

＞下記は書籍のサンプルを抜粋したものですが、その参考書にCSSの最も重要なCascadingについての説明がないのかな？？？　・・・本当に大事な部分ですからそれについて詳しい説明がないものはゴミ箱行きスタイルシートはCascading(継承)されますが、その際にどのスタイルを適用するかは詳細度や優先順位に従います。　ユーザースタイルシート＞要素内スタイルシート＞HTMLヘッド内＞外部スタイルシートと詳細度　一意セレクタ(100)，クラスセレクタ(10)，要素セレクタ(1) たとえばあるHTMLにおいて　外部スタイルシートなどで決められていても、HTML内の要素内に指定があれば、同じ詳細度であれば後者が優先されます。　たとえば、あるtable要素が、price-listクラスに所属する場合、そのクラスに所属するtableだけ文字を青くする場合なら table.price-list{color:blue;}/* 詳細度 11ですね。*/ としますし、それが一意--idをもつものなら

table#price-list{color:blue;}/* 詳細度 101ですね。*/ また、tableですからsummary属性を持つべきですから<

でしたら table[summary=price-list]{color:blue;}/* 詳細度 2ですね */ したがって、その前後に関わらず table{color:black;} /* 詳細度1は上書きされます。*/ 　たとえば外部スタイルシートだけで、特定のtable要素のスタイルを変更したい場合に変わった例として　|-- 　|　　　|--

　|　　　|--

　|　　　|　　|-- 　|　　　|　　|　　|--

　|　　　|　　|　　|　　|-- 　|　　　|--

という樹構造である場合、しかも【一切のクラス指定がない】ばあいであっても、この４個のtableは別個のスタイルシートを適用できます。 table{ color:red;} table + table{ color:blue;} table>table{color:green:} という方法もある。スタイルシートのためにHTMLを書きかえるのではなく、HTMLがきちんと書けていたら、スタイルシート側で区別できるはずです。　たぶんその参考書にはその重要なことの説明がないのでは？？？

tracer · Answer

テーブル云々は一度忘れて、「特定のPタグの文字色を変更する」を考えてみると分かりやすいかもしれません。CSSには全てのタグ、グループに属するタグ、特定のタグなどいろんな指定方法があります。
望まれているのは答えそのものかもしれませんし、ここでその答えを書くのはとても簡単なことですが、初心者の方でクリアすべき最初の課題は、まず検索の方法を身につけることかもしれません。
それなりに調べられた結果、わからなかったということと思いますが、おそらく「検索結果の内容が難しかった」のではなく、「検索の方法が適切でなかった」ということが想像されます。
たとえば今回の場合だと「css id class」でもう一度検索されてはいかがでしょうか。どういったレベルでCSSを学ばれたいかは分かりませんが、「検索力を上げること」は、確実にスキルアップにつながるので、ぜひともおすすめします。

DrFell · Answer

>div とか postとかをtableの前に持っていけばいい？みたいなところまで >調べてわかっているのですがは誤解です。それでもできないことはないですが、divはtableなどの適した要素がない場合につけるボックス要素です。tableにdivは過重包装です。また、postでなくてもtrb777でもなんでもいいので後から見ても分かるように、どういう意図でのclassなのか分かるようにつけてください。また、今は1つですが、classは何回でも使えますので、将来同じスタイルにしたい表が出てきたときhtml側に同じclass名をつければ、cssは増やす必要はなくなります。 -----

・・・略・・・

----- の

は止めて、にクラスをつけてください。 -----

・・・略・・・

----- htmlのclassに対応するのは、ｃｓｓでは「.」ピリオドです。ですからclass="post"のついたテーブルは table.post｛｝と指定し、class="post"の子要素の指定であるtdやthは「の中の」という意味で半角スペースを.postにつけ .post th{} .post td{} と指定します。つまり、 /*--------------------------- ▼テーブル -------------------------- */ table.post { background-color:#000033;} .post th { background-color:#005890; color:#ffffff; } .post td { background-color:#ffffff; color:#333333; } /*--------------------------- ▲テーブル -------------------------- */ となります。

funi2 · Answer

classというのが, まさにこのテーブルにだけ, という指示をするものです。

cssでdivなどの要素にclassを指定する場合, 
html要素名とclass名を"."で連結します。
div.post {
      ....
}
のように。
すると, class="post"と指定されたdivにだけ, div.postのcssが適用されます。

次に, 
div.post table {
   ...
}
と書くと, class="post"が指定されたdivの中のtableにだけ, 指定されたcssが適用されます。

そうすると, この場合, 一番簡単なのはcssをこうすることかと思います。

-------------------------------------------
div.post {}
div.post table { background-color:#000033;}
div.post th { background-color:#005890;
   color:#ffffff;
}
div.post td { background-color:#ffffff;
color:#333333;
}
-------------------------------------------

こうすることで, postというclassのdivの中のtable, th, tdにだけ
cssが適用されるようになります。
もっと詳しいcssの文法等は書籍等におまかせします...

ｃｓｓで一個のテーブルだけにデザインを反映したい

＞下記は書籍のサンプルを抜粋したものですが、

テーブル云々は一度忘れて、「特定のPタグの文字色を変更する」を考えてみると分かりやすいかもしれません。

>div とか postとかをtableの前に持っていけばいい？みたいなところまで

classというのが, まさにこのテーブルにだけ, という指示をするものです。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

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

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