今回は、CSSのソース中に出てくる「#」「*」「.」「>」の記号の解説をしていきます。
CSSのスタイリングの幅が広がるので、是非参考にしてください。
CSSの「#」「*」「.」「>」の記号の意味を解説！
「#」「*」「.」「>」の記号の記号について、1つ1つ見ていきましょう。
「#」
「#」は、HTMLで指定したid要素をCSSでセレクタする際に使います。
例えば、以下のようなコードです。
◎HTML
<p id="demo">ここの色が変わります。</p>
<p>ここは変わりません</p>
◎CSS
#demo {
color: red;
}
結果、HTMLで指定したid要素だけをCSSで文字色を赤にすることができました。
「#」はJavaScriptでDOM操作をする際に使われる印象ですね。
「*」
「*」は、全ての要素に指定したスタイルを適応させたい場合に使う記号です。
例えば以下のように書きます。
◎HTML
<p class="demo">ここの色が変わります。</p>
<p>ここは変わりません</p>
◎CSS
* {
color: red;
}
全ての要素の文字色が赤に変わりました。
「*」は以下のコードのようにリセットCSSで使われることが多い印象ですね。
* {
box-sizing: border-box;
list-style: none;
}
「*」は全ての要素にスタイルを適応させることが出来て便利な反面、使い方を間違えると個別にスタイルを適応出来なくなるので、注意してください。
「.」
「.」はHTMLで指定したクラス名をCSSでスタイリングする際に使う記号です。
例えば以下のように使います。
◎HTML
<p class="demo">ここの色が変わります。</p>
<p>ここは変わりません</p>
◎CSS
.demo {
color: red;
}
結果、demoクラスを指定したpタグのテキストだけが赤色になりました。
「.」はクラス名をセレクタすることはできますが、idはセレクタできないので注意してください。
「>」
「>」は、親要素の直下の特定の要素にだけスタイルを適応させることが出来る記号です。
例えば以下のように使います。
◎HTML
<div>
<p class="demo">ここの色が変わります。</p>
<a href="">
<p>ここは変わりません</p>
</a>
</div>
◎CSS
div > p {
color: red;
}
divタグの直下にあるpタグだけの文字色が赤になりました。
もう1つのpタグはaタグに囲まれているので、スタイルが効きませんでした。
このように、「>」は特定の要素にだけスタイルを適応させたい時に使えます。
まとめ
以上が、「#」「*」「.」「>」の記号の解説でした。
是非コピペして試してみてください。
