CSSを要素に適用する(セレクタの種類)

Home>CSS>用途別リファレンス>CSSを要素に適用する(セレクタの種類)

この情報はお役に立ちましたか?よろしければ皆様にもお知らせください。

  このエントリーをはてなブックマークに追加 mixiチェック  

CSSを要素に適用するには、セレクタと呼ばれる識別子を使います。

セレクタの種類

セレクタには4種類あります。

セレクタの種類 指定方法 役割 ポイント
ID #の後に続く半角英数、ハイフン id属性を持つタグに適用する 100
Class .(ピリオド)の後に続く半角英数、ハイフン class属性を持つタグに適用する 10
HTMLタグ body、img、tableなどのHTMLタグ 指定したHTMLタグに適用する 1
全称セレクタ * すべてに適用する 0

ポイント数が多いものほど優先的に反映されます(詳しくは、「CSS:優先順位」をご覧ください)。

適用方法

CSSを書くには、以下のようにします。

#id { color:#000000; } /* id="id"を持つタグのテキストを黒にする */
.class { color:#FF0000; } /* class="class"を持つタグのテキストを赤にする */
p { color:#0000FF; } /* p要素のテキストの色を青にする */
* { color:#00FF00; } /* すべての要素のテキストの色を黄緑にする */

セレクタの併用

セレクタは並列して指定することができます。

#id p .class { color:#FF0000; }

上記のCSSルールでは、

<div id="id">
<p class="class">テキスト</p>
</div>

のように指定したテキストを赤色にします。
上記の場合、以下のようなケースでは、テキストは赤くなりません。

<p class="class">テキスト</p>

様々な適用

セレクタのグループ化

セレクタとセレクタをコンマ(,)で区切って併記すると、併記したセレクタに同時にCSSを指定することができます。

#id , .class , p{ color:#000000; }

上記のコードでは、id属性がidのセレクタと、class属性がclassのセレクタと、p要素のテキストの色を、一括して黒に指定しています。

セレクタの結合

セレクタとセレクタの間に結合子を入れると、上位・下位等の概念を生みます。

結合子の種類 記述方法 役割 意味
(半角スペース) A B 子孫セレクタ Aに内包されるBすべてに適用
> A>B 子セレクタ Aに内包される1階層目のBすべてに適用
+ A+B 隣接セレクタ 同じ親要素下のAの後に続くBすべてに適用

子孫セレクタのサンプル

「A B」の場合、A以下にあるBすべてに適用されます。
タグで表現すると、<A><B>Text1</B><C><B>Text2</B></A>のときの、Text1とText2に適用されます。

これが、<A>Text1</A><B>Text2</B>の場合には、適用されません。

* { font-size:12pt; } /* 全体のフォントサイズが12ポイント */
#id .class { font-size20pt; } /* #idの子孫.classのフォントサイズは20ポイント

HTMLソースでは、以下の場合の「テキスト1」と「テキスト2」に適用されます。

<div id="id">
<p class="class">テキスト1</p>
<p><strong class="class">テキスト2</strong></p>
</div>

子セレクタのサンプル

「A>B」の場合、Aの直下にあるBすべてに適用されます。
タグで表現すると、<A><B>Text1</B><C><B>Text2</B></A>のときの、Text1には適用されますが、Text2には適用されません。

また、<A>Text1</A><B>Text2</B>の場合は、適用されません。

* { font-size:12pt; } /* 全体のフォントサイズが12ポイント */
#id>.class { font-size20pt; } /* #idの子.classのフォントサイズは20ポイント

HTMLソースでは、以下の場合の「テキスト1」には適用されますが、「テキスト2」には適用されません。

<div id="id">
<p class="class">テキスト1</p>
<p><strong class="class">テキスト2</strong></p>
</div>

隣接セレクタのサンプル

「A+B」の場合、Aの隣にあるBに適用されます。
タグで言うならば、<A>Text1</A><B>Text2</B>のときの、Text2に適用されます。

これが、<A><B>Text</B></A>のときには、Textには適用されません。

また、<A>Text1</A><C>Text2</C><B>Text3</B>のときには、どれにも適用されません。

* { font-size:12pt; } /* 全体のフォントサイズが12ポイント */
.class1+.class2 { font-size:20pt; } /* .class1の隣接セレクタ.class2のフォントサイズは20ポイント */

HTMLソースでは、以下の場合の「テキスト2」に適用されます。「テキスト1」「テキスト3」「テキスト4」には適用されません。

<p class="class1">テキスト1</p>
<p class="class2">テキスト2</p>
<p><strong class="class1">テキスト3</strong></p>
<p><strong class="class2">テキスト4</strong></p>

属性を指定するセレクタ

要素を指定するだけではなく、属性を指定した要素を選択して適用することができます。

指定方法 意味
A[B] B属性が指定されているA要素に適用
A[B="C"] Cという値が与えられているB属性が指定されているA要素に適用
A[B~="C"] 属性Bが半角スペースで区切られた単語リストにCを含んでいる値であるA要素に適用
A[B|="C"] 属性Bがハイフンで区切られた単語リストにある、Cで始まる値を指定したA要素に適用

属性セレクタのサンプル

img[alt] { margin-top:50px; }

alt属性の指定してあるimg要素の上に、50ピクセルの余白をとります。

img[alt="a"] { margin-top:50px; }

alt="a"の指定してあるimg要素の上に、50ピクセルの余白をとります。

p[class~="abc"] { font-size:20pt; }

class="abc def ghi"のように複数の値をもっている要素があるときに、そのうちの一つに合致させたいときに使います。

p[lang|="en"] { color:#FF0000; }

enで始まる言語が指定されているp要素のテキストの色を、赤色にします。

擬似クラス

セレクタの後ろにコロン(:)を入力してから以下の値を指定することで、特定の要素にCSSを適用できます。

擬似クラスの種類 役割
active a要素のクリック時のリンクテキストに適用
after 要素の直後に追加される内容に適用(contentプロパティで使用)
before 要素の直前に追加される内容に適用(contentプロパティで使用)
first-child ある要素に内包される最初の子要素に適用
first-letter ブロック要素の1文字目に適用
first-line ブロック要素の1行目に適用
focus a要素のフォーカスが合ったときのリンクテキストに適用。
hover a要素のマウスカーソルが乗ったときのリンクテキストに適用。
lang(言語) [言語]で指定した言語コードの要素に適用
link a要素のリンクテキストに適用。visitedが指定されているときは未訪問リンク。
visited a要素の訪問済みリンクに適用。

セレクタ指定時の注意

子孫セレクタ、子セレクタ、隣接セレクタを指定すると、ブラウザが表示する際に、CSSのレンダリングにおいて時間をとられやすくなります。

また、擬似クラス:hoverをa要素以外に指定すると、InternetExplorer8で速度低下につながるようです。

セレクタは、なるべく簡潔に、まとめられるものは1つにまとめて指定した方が、ユーザのストレスを軽減することになります。

関連リンク

よく読まれている記事

UpDate:2010-11-20