CSSのセレクタについて
覚え書きです。
「.」や「#」、「:」や「::」はCSSセレクタと呼ばれるものです。
とりあえず、理解できたclassとidだけメモしておきます。
classセレクタ
「.」はクラスを指定するときに使います。
クラスは複数の要素に使うことができます。
いくつかの要素をグループとして扱うことができるのです。
HTML
<p class="hatena">はてなブログ</p>
<div class="hatena">はてなブックマーク</div>
<p class="google">Googleマップ</p>
例:1
.hatena {
color:red;
}
結果(※イメージ)
例:2
p.hatena {
color:red;
}
結果(※イメージ)
例:1ではクラス名hatenaというグループに適用されています。
例:2ではクラス名hatenaというグループのp要素にのみ適用しています。
idセレクタ
「#」はidを指定するときに使います。
idは1つの要素にしか使うことができません。
特定の要素だけ指定することができるのです。
HTML
<p id="hatenablog">はてなブログ</p>
<div id="hatebu">はてなブックマーク</div>
<p id="googlemap">Googleマップ</p>
例
#hatenablog {
color:red;
}
結果(※イメージ)
終わりに
ほかにもいろいろな指定方法があるようです。
ブログのデザインをいじりたいときに必要ですから、理解を深めたいところです。
関連記事
ナビゲーションメニューをつけよう【Part 2】 - CarbonCopy’s diary
CSSで文字選択の背景色を変える - CarbonCopy’s diary