CSSのセレクタについて

覚え書きです。

「.」や「#」、「:」や「::」はCSSセレクタと呼ばれるものです。

とりあえず、理解できたclassとidだけメモしておきます。

 

classセレクタ

「.」はクラスを指定するときに使います。

クラスは複数の要素に使うことができます。

いくつかの要素をグループとして扱うことができるのです。

HTML

<p class="hatena">はてなブログ</p>

<div class="hatena">はてなブックマーク</div>

<p class="google">Googleマップ</p>

 

例:1

CSS

.hatena {

color:red;

}

結果(※イメージ)

はてなブログ

はてなブックマーク

Googleマップ

 

例:2

CSS

p.hatena {

color:red;

}

結果(※イメージ)

はてなブログ

はてなブックマーク

Googleマップ

 

例:1ではクラス名hatenaというグループに適用されています。

例:2ではクラス名hatenaというグループのp要素にのみ適用しています。

idセレクタ

「#」はidを指定するときに使います。

idは1つの要素にしか使うことができません。

特定の要素だけ指定することができるのです。

HTML

<p id="hatenablog">はてなブログ</p>

<div id="hatebu">はてなブックマーク</div>

<p id="googlemap">Googleマップ</p>

 

CSS

#hatenablog {

color:red;

}

結果(※イメージ)

はてなブログ

はてなブックマーク

Googleマップ

終わりに

ほかにもいろいろな指定方法があるようです。

ブログのデザインをいじりたいときに必要ですから、理解を深めたいところです。

関連記事

ナビゲーションメニューをつけよう【Part 2】 - CarbonCopy’s diary

 

CSSで文字選択の背景色を変える - CarbonCopy’s diary

 

Go Top