CSSを要素に適用する(セレクタの種類)
Home>CSS>用途別リファレンス>CSSを要素に適用する(セレクタの種類)
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つにまとめて指定した方が、ユーザのストレスを軽減することになります。
関連リンク
よく読まれている記事
- 右クリックメニューの表示が遅い【Information】
- 画像の一部にリンクを貼る(クリッカブルマップ【Dreamweaver】
- 一定時間でローテーションする広告【JavaScript】
- Dreamweaver【Dreamweaver】
- クリックした画像を拡大・縮小する【JavaScript】
UpDate:2010-11-20