CSSの記号 「クラス名」「*」「#」 「.」 「 」 「＞」

「クラス名」
装飾を施す範囲を指定できる。

【HTML】
<p>TEST</p>
<span>TEST2</span>

【CSS】
p {
color: #333333
}

上記の場合は、spanタグには適用されない。

「*」
CSS中の「*」は全ての要素に装飾が指定される。

「#」
CSS中の「#」はID名をセレクタにするときに使います。

#test {
color:red;
}

<p id="test">ここが適用</p>
<p>ここはそのまま</p>

「.」
CSS中の「.」はクラス名をセレクタするときに使います。

.test{
color:red;
}

<p class="test">ここはクラス名を付けているので適用</p>
<p>ここはそのまま</p>

「 」

#はid名 、.はクラス名を指定しますが、.や＃がない場合はタグの種類を指します。


body
はbodyタグを指定しますのでこれに対して.をつけるとbodyクラスを指定することとなってしまいます！

test{
color:red;
}

<test>
<p>この部分全体に適用される</p>
</test>

「>」
CSS中の「>」は子セレクタ（直下セレクタ）と呼ばれるもので、親セレクタ中の特定の要素に対してのみスタイルを適用させるものです。

div>p {
color:red;
}

<div>
<p>この部分は適用される</p>
<a>
<p>この部分は適用されない</p>
</a>
</div>

div直下の<p>には適用されるが、２つ目の<p>の間には<a>タグがあるためスタイルが適用されない。

div p {
color:red;
}

とするとどちらの<p>にも適用される。