CSSの勉強 5 : 各種セレクタについて

 このブログ記事は個人的な勉強のメモ書き、覚え書き程度のものです。内容の正確性などあまり当てにならない面が多いので、ちゃんとしている情報を知りたい場合は他のサイトを探して下さい。

---

CSSの各種セレクタについて

要素セレクタ

<p>や<h1>などHTMLの要素に対して適用するもの。

要素セレクタは要素名としてCSSに記述する。
HTMLファイルの要素に対してそれが適用される。

IDセレクタ

ある限定した要素に対してスタイルを適用したい場合に用いる。
使用条件として、一つのページで重複してIDセレクタを用いることは出来ないらしい。
実際、重複して使った場合にどうなるかは分からない。ブラウザ側での解釈次第？
よく分からない場合は後述するクラスセレクタを用いるのが無難の模様。

IDセレクタは以下のように名前の頭にハッシュ(#)記号が付く。
#tetete

使うときは
<p id="tetete"> idセレクタのテスト </p>
のように用いる。

クラスセレクタ

ある限定した要素に対してスタイルを適用したい場合に用いる。IDセレクタとは異なり、一つのページで重複しても用いることが出来る。

クラスセレクタは以下のように名前の頭にドット(.)記号が付く。
.momo

使うときは
<p class="tetete"> 暮らすセレクタのテスト </p>
のように用いる。
また複数のクラスセレクタを要素に適用することも可能。".momo"と".mumu"の二つのクラスセレクタを適用するには
<p id="momo mumu"> クラスセレクタ複数使用のテスト </p>
とする。