CSSの「#」「.」「＞」ってどういう意味？各種記号解説

CSSソース中に出てくる記号ですが、あまり知られていないことが多いです。それではCSSの記号の解説をしていきます。

「#」

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

とすれば、

<p id="test">ここが適用</p>

<p>ここはそのまま</p>

の場合、id="test"とした部分の色が変わります。

「.」

CSS中の「.」はクラス名をセレクタするときに使います。使用方法は「#」と同じです。「.」の有無でクラス名なのかHTMLの要素名なのかを決めます。

例：

とすれば、

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

<p>ここはそのまま</p>

の場合、class="test"とした部分の色が変わります。

「>」

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

例：

というCSSを書き、HTMLを以下に示します。

<div>

<p>この部分は適用される</p>

<a>

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

</a>

</div>

divの直下セレクタである一個目のpには適用されるが、二個目のpにはdivとの間にaというタグがあるためにスタイルが適用されない。また、以下のように

とした場合はどちらのpにも適用されます。