読み取り方教えてください。

質問

無料のhtmlメールテンプレートをダウンロードした後、カスタマイズしています。
下記、記述の読み取り方を教えてください。

(1)#left-sidebar .toc-item { font-size: 12px;}

id"left-sidebar"とクラスtoc-itemはfont-size: 12pxにします。
ということだと思ったのですが、bodyにクラスtoc-itemはありませんでした。
どういう意味なのでしょうか。

(2)class*=hide

クラスにつく＊はどういう意味なのでしょうか？

初歩的質問かと思いますがご回答よろしくお願いいたします。

回答No.1

ORUKA1951 · ベストアンサー

まず仕様書を読んでおきましょうね。あなたの疑問は【すべて】【詳しく】【正確に!!】に書かれています。スタイルシートにしろHTMLにしろ、まず仕様書に目を通しておくこと。そうすれば分からない時に何処を読めばよいかがわかります。
　⇒HTML 4.01 Specification (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html )
　⇒Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification (ja)( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cover.html )

＞id"left-sidebar"とクラスtoc-itemは
　違います。!!子孫セレクタでつながってますから、一意セレクタ(#left-sidebar)の子孫( )のクラスセレクタ(.toc-item)を持つ要素と言う意味です。「id"left-sidebar"とクラスtoc-item」の場合は #left-sidebar,toc-item{}と書かれているはずです。
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 )
はスタイルシートを使用する場合の必須で重要な部分です。font-size: 12px;というプロパティの説明より前に、ページ数を割いて書いてある。

★それは古い書き方です。現在ウェブ標準とされているCSS2.1では、基点となるセレクタを書かなければなりませんから、
*#left-sidebar *.toc-item { font-size: 12px;}
が正式な書き方です。*は全称セレクタで詳細度は0です。

★#left-sidebar .toc-item のようなidやclass名は望ましくありません。
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』と書かれているようにね。

class*=hide
　そのような書き方はありません。属性セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html#attribute-selectors )とクラスセレクタは同じものですから
.abc は、*[class~=abc] と言う意味です。

お礼

ORUKA1951様ご回答ありがとうございます。

これからは、まずは仕様書を確認します。自分なりに噛み砕き理解したいと思います。
ORUKA1951様のおかげで今回の記述を読み解く事ができました。

ありがとうございます。