CSS(スタイルシート)の色々なセレクタの使い方

前回にCSSの使い方を書きましたが、今回はセレクタの使い方をまとめます。
たとえばリストの一番目だけにスタイルを当てたい場合は「:first-child」という擬似セレクタを使うことで指定できます。

モダンブラウザは基本的に対応していますがIEはバージョンによって非対応もあります。
基本的にIE6は対応していません。

セレクタとは

CSSへ記述する要素の部分です。↓これ
☆セレクタ☆{プロパティ:値}

セレクタ{プロパティ:値}
p{font-size:10px;}

セレクタの書き方の種類

結構色々あります。

  • タイプセレクタ：要素を一つ指定
  • 複数セレクタ：要素を複数指定
  • 子孫セレクタ：親要素以降の要素を指定
  • 子セレクタ：親要の次の要素を指定
  • 隣接セレクタ：同じ階層直後の要素を指定
  • ユニバーサルセレクタ：全要素を指定
  • クラスセレクタ：class名を指定
  • アイディセレクタ：id名を指定
  • 擬似セレクタ：条件のついた要素を指定
  • 属性セレクタ：属性のついた要素を指定(altとか)
  • 属性＋値セレクタ：属性と値がついた要素を指定(_blankとか)

タイプセレクタの書き方

これが基本的な書き方になります。ひとつの要素を指定する場合に使います。

CSS記述

p{font-size:10px;}

HTML記述

<p>こんにちわ</p>

実行結果

こんにちわ

複数セレクタ

これも一般的によく使われます。h1とpをとかですね。クラス名なども複数使えます。
”,”で要素同士を区切ります。

CSS記述

h5,
p{font-size:10px;}

HTML記述

<h5>見出し</h5>
<p>こんにちわ</p>

実行結果

実行結果

こんにちわ

子孫セレクタ

これも一般的によく使われます。要素の中の全ての要素へ反映されます。
”セレクタ セレクタ”と半角で区切ることでセレクタの中のセレクタとなります。

CSS記述

div.redBox p{color:red;}

HTML記述

<div class="redBox">
	<p>赤文字になるよ</p>
	<div class="inbox">
		<p>赤文字になるよ</p>
	</div>
</div>

<p>ここは赤にならないよ</p>

実行結果

赤文字になるよ

赤文字になるよ

ここは赤にならないよ

子セレクタ

要素の直下、いわゆる子セレクタに反映されます。
”セレクタ > セレクタ”と区切ります。別の要素に包まれていると影響を受けません。
慣れないと使いにくいかもしれませんね。

CSS記述

div.blueBox > p{color:blue;}

HTML記述

<div class="blueBox">
	<p>青文字になるよ</p><!-- ←ここが子セレクタ -->
	<div class="inbox">
		<p>ここは青にならないよ</p><!-- ←孫なので影響無い -->
	</div>
</div>

<p>ここは青にならないよ</p>

実行結果

青文字になるよ

ここは青にならないよ

ここは青にならないよ

隣接セレクタ

要素の直後に隣接した要素に反映されます。
”セレクタ + セレクタ”と区切ります。

CSS記述

h5 + p{color:red;}

HTML記述

<h5>見出し</h5>
<p>赤文字になるよ</p>
<p>文字の色は変わらないよ</p>

実行結果

見出し

赤文字になるよ

文字の色は変わらないよ

ユニバーサルセレクタ

h1とかpとか全部の要素に反映されます。
”*”とアスタリスクが全てという指定です。子孫セレクタで指定もできます。
リセットCSSとかでよく使われてますね。使用頻度はあまり無いでしょう。
IEのハックで使うことはあります。

CSS記述

*{color:red;}
p *{font-weight:bold;}

HTML記述

<div class="box">
	<p>文字が赤くなるよ。<span>ここは太文字になるよ</span></p>
</div>

実行結果

文字が赤くなるよ。ここは太文字になるよ

クラスセレクタ

これも一般的に使います。要素につけたクラス名を指定します。
”セレクタ.クラス名”とくっつけて使います。
セレクタを指定しない場合はページ内にある全要素に付けられたクラス名へ反映されます。

CSS記述

.font-red{color:red;}/* このクラス名全部が赤文字に */
p.font-blue{color:red;}/* pについたクラス名が青文字に */

HTML記述

<div class="font-red">
	<p>赤文字になるよ</p>
	<p class="font-blue">青文字になるよ</p>
</div>

実行結果

赤文字になるよ

青文字になるよ

アイディセレクタ

これも一般的に使います。要素につけたid名を指定します。
”セレクタ.id名”とくっつけて使います。
セレクタを指定しない場合はページ内にある全要素に付けられたid名へ反映されます。
しかし構文のルール上、同一ページで同じid名は使えないので注意。

CSS記述

#font-red{color:red;}/* このクラス名全部が赤文字に */
p#font-blue{color:red;}/* pについたクラス名が青文字に */

HTML記述

<div id="font-red">
	<p>赤文字になるよ</p>
	<p id="font-blue">青文字になるよ</p>
</div>

実行結果

赤文字になるよ

青文字になるよ

擬似セレクタ

特定の条件の要素へスタイルを反映させます。リンクのスタイルでよく使うと思います。
”セレクタ:擬似セレクタ”と:をくっつけて指定します。
この擬似セレクタはいくつかの種類があります。

数が多く、使い方も様々なので後日まとめます。

擬似セレクタ一覧

  • :link擬似クラス/未訪問のリンク
  • :visited擬似クラス/訪問済みのリンク
  • :hover擬似クラス/カーソルが乗っている要素
  • :active擬似クラス/クリックした要素
  • :focus擬似クラス/フォーカスされた要素(フォームの入力中とか)
  • :lang擬似クラス/言語指定した要素
  • :first-child擬似クラス/始めの要素(リストの一つ目とか)
  • :last-child擬似クラス[CSS3]/最後の要素(リストの最後とか)
  • :first-line擬似クラス/ブロック要素の最初の行
  • :first-letter擬似クラス/ブロック要素の最初の文字
  • :before擬似クラス/要素の直前に差し込む
  • :after擬似クラス/要素の直後に差し込む

擬似セレクタの複数指定

一つの要素に複数の擬似セレクタを指定できます。
例えば「リスト一つ目をマウスホバーする」などできます。
”セレクタ:擬似セレクタ:擬似セレクタ”と続けて書くだけです。

CSS記述

ul li:first-child:hover{color:red;}

HTML記述

<ul>
	<li>マウスを持ってくると赤文字になるよ</li>
	<li>赤文字にならないよ</li>
</ul>

実行結果

  • マウスを持ってくると赤文字になるよ
  • 赤文字にならないよ

属性セレクタ

要素に特定の属性が記述されている場合に利用できます。
altやtitle、class等が属性にあたります。
”セレクタ[属性]”と[]で囲みます。

CSS記述

p[class]{color:red;}
span[title]{color:red;}

HTML記述

<p class="hoge">文字が赤くなるよ</p>
<p><span title="青文字">青文字になるよ</span></p>

CSS記述

文字が赤くなるよ

青文字になるよ

属性＋値セレクタ

要素に特定の属性と値が記述されている場合に利用できます。
altやtitle、class等が属性にあたります。ウェブフォントもこのセレクタを利用したりしていますね。
”セレクタ[属性=”値”]”と[]で囲みます。

CSS記述

p[class="red"]{color:red;}
span[title="yellow"]{color:yellow;}

HTML記述

<p class="red">文字が赤くなるよ</p>
<p><span title="yellow">黄色文字になるよ</span></p>

実行結果

文字が赤くなるよ

黄色文字になるよ

最後に

このようにセレクタの書き方は数多くあります。
また組み合わせることで様々なスタイルを使用することができることになります。

昨今人気のウェブフォントも「属性＋値セレクタ」を使用したりしています。
覚えるのは大変ですがとても便利なので利用しましょう。

IEだけが注意ですが・・・