CSSの文

質問

下記のCSSの文の場合で「.　.」ときた場合後ろの「.」にはどういう意味があるのか、
「.　:」ときた場合後ろの「:」にはどういう意味があるのかわかりません
どなたか教えてくれる人いませんか？

#main .menuArea .contentWrap { }

#main .tabList:after { }

回答No.2

notnot · ベストアンサー

#main .menuArea .contentWrap { なんたらかんたら }
は、
#main { なんたらかんたら }
.menuArea { なんたらかんたら }
.contentWrap { なんたらかんたら }
と同じです。
同じ記述をまとめて指定している。

: に特別な意味は無く、:after で意味を持ちます。「after疑似要素」で調べてください。
.tabList:after { content: "XXX"; }
とかすると、.tabList の直後に XXX という文字を表示します。

回答No.1

ORUKA1951

.はクラスセレクタです。
要素セレクタのひとつです。
#main .menuArea .contentWrap { }
の意味は
*#main *.menuArea *.contentWrap { }
とまず解釈されます。*は全称セレクタ
半角スペースがありますから
一意セレクタ(HTMLで言うところのID属性値)にmainをもつすべて(*)のタイプ(HTMLで言うところの要素)の子孫(半角スペース)であるところの、class属性の値のリストにmenuAreaを持つすべてのタイプの子孫の、class属性の値のリストにcontentWrapを持つすべてのタイプと言う意味です。

#main .tabList:after { } は、*#main *.tabList:after { }は、同様にmainという一意セレクタを持つすべての要素の子孫である、class属性の値のリスト中にtableListを持つすべての要素の最後(擬似要素)てす。

[詳細度]
#main .menuArea .contentWrap { } = *#main *.menuArea *.contentWrap { }
=[0,1,2,0]
#main .tabList:after = *#main *.tabList:after { }
=[0,1,1,1]
ですね。

　いずれにしても、対象のHTMLが酷いもののようですから、大変そうです。
・HTMLが文書構造ではなくプレゼンテーションのために書かれている
　『構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )』が考慮されていない。そのため余計に分からなくなる。将来デザインを変えるのが大変そう。
・スタイルシートがCSS1の時代の古い書き方
　基点となるセレクタを書く癖をつけましょう。*はこのルールによって詳細度0のタイプセレクタ(全称セレクタ)として導入されました。

★セレクタとカスケード処理はCSSにとって最も大事な肝です。これを最初にしっかり身につけないと、HTMLもCSSも酷いものになります。CSSはカスケーディング スタイルシートの略です。カスケーディングを知らなくてCSSは使えるはずがないですよね。

1) まずセレクタ(選択手法)を覚えましょう。次の順番で学ぶと良い
　1-1)基点となるセレクタ
　　1-1-1)全称セレクタ【詳細度[0,0,0,0]】
　　1-1-2)タイプセレクタ【詳細度[0,0,0,1]】
　1-2)つなげるセレクタ
　　1-2-1)子孫セレクタ(半角スペース)
　　1-2-2)子セレクタ(>)
　　1-2-3)隣接セレクタ(+)
1-3)オプション
　　1-3-1)属性セレクタ【詳細度[0,0,1,0]】
　　1-3-2)クラスセレクタ【詳細度[0,0,1,0]】・・属性セレクタのひとつ
　　1-3-3)擬似クラスセレクタ【詳細度[0,0,1,0]】
　　　　　　リンクの擬似クラスと動的な擬似クラス
　　1-3-4)擬似要素セレクタ【詳細度[0,0,0,1]】・・タイプセレクタと同じ
　　1-3-5)一意セレクタ【詳細度[0,1,0,0]】
2)ついで、カスケーディング
　2-1)継承されるものされないもの
　2-2)出所による優先順位
　2-3)詳細度の計算
　2-4)出現順番
これらを身につけてから、プロパティを学ぶべきですね。

　⇒REC-CSS2 邦訳( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cover.html )　　5.セレクタ
　　6.値の割り当て、カスケード処理、継承

　CSS2の邦訳です。現行のCSS2.1でいくつか改訂されていますが、当面はこれで良いでしょう。

　沢山書かれていますが、すぐ理解できると思います。
＞「.　.」ときた場合後ろの「.」にはどういう意味があるのか、
　いずれも肝は半角スペースです。.は*.が省略されている。
　#main .menuArea
= *#main *.menuArea
　*(全称セレクタが省略されている)　すべてのタイプ
　　#main　mainというIDを持つもの
　　　[ ]半角スペース　その子孫の
　　　　　*(すべてのタイプ)
　　　　　　.menuArea(クラスセレクタ)

＞「.　:」ときた場合後ろの「:」にはどういう意味があるのかわかりません
　:afterは、擬似要素、content:プロパティと併用する