CSSについて教えて下さい

質問

CSSについて教えて下さい。
↓下記はどのような意味になりますでしょうか。

.table-hover > tbody > tr:hover > td, .table-hover > tbody > tr:hover > th {
background-color: #550055;
color: #eeeeee;
}

回答No.2

ONEONE · ベストアンサー

. : クラス
> : 直下の要素
, : セレクタの併記

table-hoverクラス直下のtbody直下のtr上にマウスが来たときの直下のtdまたはth
の背景色を#550055、文字色を#eeeeee

お礼

ありがとうございます！

回答No.1

ORUKA1951

それは聞いているようではダメ。
パターンマッチ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html#pattern-matching )ですが、
5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html )
6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cascade.html )
　はCSSの命ともいえる重要な基礎です。セレクタやカスケーディングを知らないでカスケーディングスタイルシートは絶対に使えません。

　ただ、
.table-hover > tbody > tr:hover > td
.table-hover > tbody > tr:hover > th
のいずれも、本来からいうとおかしいです。CSS2以降基点セレクを書かなければならないのに.table-hoverは？？？ *.table-hover とか、そもそも単純に
tr:hover > td,tr:hover > th{}
ですみそうですし、そもそも"table-hover"なんてclass名はつけないです。class名はあくまで文書構造の補完に使用しますから<table summary="今月の予定">HTML4.01、<table title="今月の予定">(HTML5)とかにしておいて、
tble[summry="今月の予定"] tr:hover > td,
tble[summry="今月の予定"] tr:hover > th{}
、
tble[title="今月の予定"] tr:hover > td,
tble[title="今月の予定"] tr:hover > th{}

のほうが分かりやすいです。・・・HTMLもCSSもそのように書くべき

tbodyを入れているのは、theadがあり、そこでは適用しないときでしょうね。thead要素がなければ子供セレクタは不必要でしょう。

　それとも複雑な階層を持つテーブルなのでしょうか・