セレクタの種類

セレクタの種類

セレクタは、「基本セレクタ」「IDセレクタ」「CLASSセレクタ」「擬似クラス」と、４つの種類があります。また、書き方も多少異なります。それぞれに役割を持っているので、用途によって使い分けるとさらに効率よく設定することができます。
以下にそれぞれの記述方法を紹介します。

基本セレクタ

h1 { 属性: 値 }

解説

h1やdivやpなどの要素にスタイルを適用します。そうすると、例えばh1要素にスタイルを設定すると、そのHTMLファイル内全てのh1要素に設定したスタイルシートが適用されます。ページの基本となるスタイル設定と言えます。

IDセレクタ

#ID名 { 属性: 値 }
基本セレクタ名#ID名 { 属性: 値 }

解説

特定の要素にスタイルシートを適用したい場合に利用します。一つのHTMLファイル内では、同じIDセレクタは一度しか利用できません。（間違えて使用しても、ブラウザが解釈して表示される場合もあります。）
IDセレクタは、IDを設定した要素に対してのみスタイルシートが適用されます。
IDセレクタとして定義するのには先頭に「#」をつけます。また、すべての要素をあらわす「*」（アスタリスク）をつけて「*#ID」のように記述することもできます。

CLASSセレクタ

.CLASS名 { 属性: 値 }
基本セレクタ名.CLASS名 { 属性: 値 }

解説

擬似クラス

要素名:擬似クラス名 { 属性: 値 }

例えば
a:link {
color: #0000ff
}
a:visited {
color: #9900cc
}
a:hover {
color: #ff0099
}
a:active {
color: #ff0000
}

解説

擬似クラスは、文章中の性質とは関係のない性質のものに対して設定するクラスです。主に<a>要素の色を変化させるために使われます。
a:link、a:visited、a:hover、a:activeの順番は入れ替えることはできません。全ての設定を行う場合は、説明の順番通りに記述してください。