2013/09/12

Webデザイナーなら覚えておきたいCSS3セレクタ一覧

Webデザイナーなら覚えておきたいCSS3セレクタ一覧

CSS3から多くのセレクタが追加されました。
CSSを扱う上でセレクタの存在はとても重要です。
全てを覚える必要はありませんが、よく使うものから少しずつ覚えていきましょう!
※IE6~8では、CSS3セレクタにほとんど対応していません。

目次

間接セレクタ

間接セレクタは、親要素が同じ兄弟関係の弟に適用されるセレクタです。
このセレクタは、隣接セレクタとは違って、兄弟関係であれば間に別の要素が入っても適用されます。(隣接セレクタのように直後の弟にも適用されます。)
記述方法は各単純セレクタを、チルダ(~)で区切って書きます。

E ~ F

使用例

【CSS】

h2 {
    margin-top:20px;
}
h2 ~ h2 {
    margin-top:60px;
}

【HTML】

<h2>タイトル1</h2>
<p>テキスト1</p>
<h2>タイトル2</h2>
<ul>
    <li>テキスト2</li>
    <li>テキスト3</li>
</ul>
<h2>タイトル3</h2>
<p>テキスト4</p>
<div class="wrap">
    <h2>タイトル4</h2>
    <p>テキスト5</p>
</div>

ブラウザの表示

E ~ F

2つ目以降の<h2>、つまり「タイトル2」と「タイトル3」にはmargin-top:60px;が適用されています。
「タイトル4」は<div class="wrap">内にあるため、兄弟関係の<h2>ではないので適用されていません。

属性セレクタ

属性セレクタは、HTMLなどの属性と一致した場合に適用されるセレクタです。
CSS3から新たに3つ追加されたのでご紹介します。

E[foo^="bar"]

E[foo^="bar"]の属性セレクタは、ある要素の中で、指定した属性の値と完全に一致した場合にスタイルが適用されます。

使用例

【CSS】

a[href=" http://www.hp-stylelink.com/"] {
    font-size:150%;
    font-weight:bold;
    color:red;
}

【HTML】

<ul>
    <li><a href=" http://www.hp-stylelink.com/">スタイルtop</a><li>
    <li><a href=" http://www.hp-stylelink.com/news/">スタイルブログ一覧</a><li>
</ul>

ブラウザの表示

E[foo^=

完全に一致しないとスタイルが適用されないため、「スタイルtop」には適用されていますが、「スタイルブログ一覧」には適用されていません。

E[foo$="bar"]

E[foo$="bar"]の属性セレクタは、指定した属性の属性値が後方一致した場合、指定した要素にスタイルが適用されます。

使用例

【CSS】

a[href$=".psd"],
a[href$=".ai"],
a[href$=".png"] {
    padding-left:22px;
    background-repeat:no-repeat;
}
a[href$=".psd"] {
    background-image:url(../images/icon1.gif);
}
a[href$=".ai"] {
    background-image:url(../images/icon2.gif);
}
a[href$=".png"] {
    background-image:url(../images/icon3.gif);
}

【HTML】

<ul>
    <li><a href="hoge.psd">photoshop</a></li>
    <li><a href="hoge.ai">illustrator</a></li>
    <li><a href="hoge.png">fireworks</a></li>
</ul>

ブラウザの表示

E[foo$=

リンク先のファイルの種類によってアイコンを表示させています。

E[foo*="bar"]

E[foo*="bar"]の属性セレクタは、指定した属性の属性値が部分一致した場合、指定した要素にスタイルが適用されます。

使用例

【CSS】

li img[src*="/02/"] {
    padding: 1px;
    border: 1px solid #333;
}

【HTML】

<ul>
    <li><img src="images/01/flower.jpg" alt="" /></li>
    <li><img src="images/02/flower.jpg" alt="" /></li>
</ul>

ブラウザの表示

E[foo$=

ディレクトリ名で部分一致させて、02ディレクトリに入っている画像のみにスタイルを適用させています。

擬似クラス

擬似クラスは、周りの状況によって特定されるものや、ユーザー操作によって特定されるセレクタです。
様々な種類がありますが、一つ一つの違いがわかりづらいので使う際には気をつけましょう。

E:root

文書内のルートにあたる要素にスタイルが適用されます。
ルートにあたる要素はHTMLの場合はhtml要素に該当します。

使用例

【CSS】

:root {
    margin:0;
    padding:0;
}

html要素にmargin:0;とpadding:0;が適用されます。
しかしタイプセレクタで指定してもまったく同じなので、基本的に使う機会はありません。

E:last-child

:last-child擬似クラスは、ある要素内で最後に書かれている子要素にスタイルが適用されます。
ちなみに最初に書かれている子要素にスタイルを適用したい場合はCSS2で定義されている「E:first-child」を使用します。

使用例

【CSS】

ul li:last-child {
    color:red;
}

【HTML】

<ul>
    <li>テキスト1</li>
    <li>テキスト2</li>
    <li>テキスト3</li>
</ul>

ブラウザの表示

E:last-child

このように、親要素<ul>内で最後にある子要素の<li>にスタイルが適用されます。

E:nth-child(n)

E:nth-child(n)擬似クラスは、ある要素の隣接している子要素を最初から数えてn番目の要素にスタイルを適用します。
隣接している要素を数えるので、間に別の要素があるとその要素もカウントしてn番目にスタイルが適用されます。

使用例

【CSS】

ol li:nth-child(2) {
    color:red;
}
ol li:nth-child(4) {
    color:blue;
}

【HTML】

<ol>
    <li>テキスト</li>
    <li>テキスト</li>
    <li>テキスト</li>
    <li>テキスト</li>
    <li>テキスト</li>
    <li>テキスト</li>
</ol>

ブラウザの表示

E:nth-child(n)

<ol>内の子要素<li>を最初から数えて2番目にcolor:red;、5番目にcolor:blue;を適用しています。

n値には数字以外にも色々な指定方法があります。

2 2番目の要素に適用
odd 奇数番目の要素に適用
2n+1 奇数番目の要素に適用
2even 偶数番目の要素に適用
2n 偶数番目の要素に適用
3n 3,6,9,12...番目の要素に適用
3n+1 1,4,7,10...番目の要素に適用

E:nth-last-child(n)

E:nth-last-child(n)擬似クラスは、ある要素の隣接している子要素を最後から数えてn番目の要素にスタイルを適用します。
隣接している要素のn番目になるので、別の要素が間に入っていると適用されません。
このセレクタは最後から数えるだけで、他はE:nth-child(n)擬似クラスと変わりありません。

使用例

【CSS】

ol li:nth- last-child(2) {
    color:red;
}
ol li:nth- last-child(4) {
    color:blue;
}

【HTML】

<ol>
    <li>テキスト</li>
    <li>テキスト</li>
    <li>テキスト</li>
    <li>テキスト</li>
    <li>テキスト</li>
    <li>テキスト</li>
</ol>

この場合、<ol>内の子要素<li>を最後から数えて2番目にcolor:red;、5番目にcolor:blue;が適用されます。

E:first-of-type

E:first-of-type擬似クラスは、ある要素の同じ子要素の最初の要素にスタイルを適用します。

使用例

【CSS】

div p:first-of-type {
    color:red;
}

【HTML】

<div>
    <p>テキスト1</p>
    <p>テキスト2</p>
    <p>テキスト3</p>
</div>

ブラウザの表示

E:first-of-type

親要素<div>内で兄弟関係にある<p>の中で最初のものに適用されています。

E:last-of-type

E:last-of-type擬似クラスは、ある要素の同じ子要素の最後の要素にスタイルを適用します。
このセレクタは最後に適用されるだけで、他はE:first-of-type擬似クラスと変わりありません。

使用例

【CSS】

div p:last-of-type {
    color:red;
}

【HTML】

<div>
    <p>テキスト1</p>
    <p>テキスト2</p>
    <p>テキスト3</p>
</div>

ブラウザの表示

E:last-of-type

親要素<div>内で兄弟関係にある<p>の中で最後のものに適用されています。

E:nth-of-type(n)

E:nth-of-type(n)擬似クラスは、ある要素の同じ子要素を最初から数えて、n番目の要素にスタイルを適用します。
E:nth-child(n)擬似クラスでは、要素同士が隣接している必要があったのに対して、こちらは間接していても適用されます。

使用例

【CSS】

div p:nth-of-type(4) {
    color:red;
}

【HTML】

<div>
    <p>テキスト1</p>
    <p>テキスト2</p>
    <h3>見出し1</h3>
    <p>テキスト3</p>
    <p>テキスト4</p>
    <p>テキスト5</p>
</div>

ブラウザの表示

E:nth-of-type(n)

このような場合、親要素<div>内の中で4番目の<p>に適用されています。
間に<h3>が入っていても適用されています。

E:nth-last-of-type(n)

E:nth-last-of-type(n)擬似クラスは、ある要素の同じ子要素を最後から数えて、n番目にあたる要素にスタイルを適用します。
E:nth-last-child()擬似クラスでは、対象の要素同士が隣接している必要があったが、こちらは間接していても適用されます。
このセレクタは最後から数えるだけで、他はE:nth-of-type(n)擬似クラスと変わりありません。

使用例

【CSS】

div p:nth-last-of-type(4) {
    color:red;
}

【HTML】

<div>
    <p>テキスト1</p>
    <p>テキスト2</p>
    <h3>見出し1</h3>
    <p>テキスト3</p>
    <p>テキスト4</p>
    <p>テキスト5</p>
</div>

ブラウザの表示

E:nth-last-of-type(n)

最後から数えて5番目の<p>に適用されています。

E:only-child

E:only-child擬似クラスは、要素内で子要素が一つだけの場合に適用されます。
複数の子要素がある場合は適用されません。

使用例

【CSS】

div p:only-child {
    color:red;
}

【HTML】

<div>
    <p>テキスト1</p>
    <p>テキスト2</p>
    <p>テキスト3</p>
</div>
<div>
    <p>テキスト1</p>
    <p>テキスト2</p>
</div>
<div>
    <p>テキスト1</p>
</div>

ブラウザの表示

E:only-child

最後の<div>以外は複数の子要素をもっているため、スタイルは適用されていません。

E:only-of-type

E:only-of-type擬似クラスは、要素内の指定した要素が一つだけの場合に適用されます。

使用例

【CSS】

div p:only-of-type {
    color:red;
}

【HTML】

<div>
    <p>テキスト1</p>
    <p>テキスト2</p>
    <p>テキスト3</p>
</div>
<div>
    <h3>見出し1</h3>
    <p>テキスト2</p>
</div>
<div>
    <p>テキスト1</p>
</div>

ブラウザの表示

E:only-of-type

E:only-child擬似クラスととても似ていますが、こちらはこのように子要素が複数あったとしても、指定した<p>が一つであれば適用されます。

E:empty

E:empty擬似クラスは、要素内が空の場合に適用されるセレクタです。

使用例

【CSS】

table {
    border:1px solid #333;
}
table td {
    width:70px;
    padding:10px 20px;
    border:1px solid #333;
    text-align:center;
}
table td:empty {
    background:#eee;
}

【HTML】

<table>
    <tr>
        <td>テキスト1</td>
        <td></td>
        <td>テキスト2</td>
    </tr>
</table>

ブラウザの表示

E:empty

<td>要素内が空の場合に、背景がグレーで塗りつぶされるように指定しました。
真ん中の<td>が空なのでグレーになっています。

ターゲット擬似クラス

E[foo^="bar"]

E:target擬似クラスは、アンカーリンク(URLに#が含まれている)で飛んだ先の要素にスタイルが適用されます。
アンカーリンクとは、
http://www.hp-stylelink.com/service/#sample
のように、#で始まりフラグメント識別子で終わるURLのことを言います。

使用例

【CSS】

p:target {
    color:red;
}

【HTML】

リンク

ここに適用されます

http://www.hp-stylelink.com/service/#sample に移動したときに、ターゲットとなる<p>にスタイルが適用されるようになります。
「リンク」をクリックすれば「ここに適用されます」が赤色になります。

UI擬似クラス

E:enabled,E:disabled

E:enabled,E:disabledは、有効または無効にしている時にスタイルが適用されるセレクタです。

使用例

【CSS】

textarea:disabled {
    background:#333;
}
textarea:enabled {
background:#fff;
}

【HTML】

<p><textarea rows="3" cols="30"></textarea></p>
<p><textarea rows="3" cols="30" disabled="disabled"></textarea></p>

<textarea>が無効のときはグレーの背景になり、有効な場合は白背景になります。

E:checked

E:checked擬似クラスは、ラジオボタンやチェックボックスがチェックされた時に適用されるセレクタです。

使用例

【CSS】

input[type=radio]:checked + label  {
    color: red;
}

【HTML】

<form>
    <input type="radio" name="btn" value="sample1">
    <label>ボタン1</label>
    <input type="radio" name="btn" value="sample2">
    <label>ボタン2</label>
</form>

ブラウザの表示

E:checked

E:checked

このように、チェックをいれると<label>のテキストの色が変化します。

否定的擬似クラス

E:not(s)

E:not(s)は、特定のセレクタ以外のセレクタに適用されるセレクタです。
少しややこしいですが、Eに要素、(s)に適用させたくない要素や属性を入れることによって、それ以外にCSSを適用させるというものです。

使用例

【CSS】

body*:not(h2) {
    background-color:red;
}

【HTML】

<h2>見出し1</h2>
<h3>見出し2</h3>
<p>テキスト</p>

ブラウザの表示

E:checked

body* は全ての要素という意味だが、notセレクタでh1を代入しているため、<h1>以外の要素全てに適用されます。

CSS3セレクタ一覧

パターンセレクタ名説明
E ~ F 間接セレクタ E要素の後に出現するF要素にマッチ
E[foo^="bar"] 属性セレクタ 属性[foo]の値が[bar]と前方一致するE要素にマッチ
E[foo$="bar"] 属性セレクタ 属性[foo]の値が[bar]と後方一致するE要素にマッチ
E[foo*="bar"] 属性セレクタ 属性[foo]の値が[bar]と部分一致するE要素にマッチ
E:root :root疑似クラス ドキュメントのルート要素にマッチ
E:last-child :last-child疑似クラス ある要素内の中に含まれる最後のE要素にマッチ
E:nth-child(n) :last-child()疑似クラス ある要素内の隣接しているE要素で最初から[n番目]のE要素にマッチ
E:nth-last-child(n) :nth-last-child()疑似クラス ある要素内の隣接しているE要素で最後から[n番目]のE要素にマッチ
E:first-of-type :first-of-type疑似クラス 兄弟関係にあたるE要素の最初のE要素にのみマッチ
E:last-of-type :last-of-type疑似クラス 兄弟関係にあたるE要素の最後のE要素にのみマッチ
E:nth-of-type(n) :nth-of-type()疑似クラス 兄弟関係のE要素で最初から[n番目]のE要素にマッチ
E:nth-last-of-type(n) :nth-last-of-type()疑似クラス 兄弟関係のE要素で最後から[n番目]のE要素にマッチ
E:only-child :only-child疑似クラス ある要素内で子要素がE要素のみの場合にマッチ
E:only-of-type :only-of-type疑似クラス ある要素内で唯一のE要素にマッチ
E:empty :empty疑似クラス E要素の中が空の場合にマッチ
E:target ターゲット擬似クラス リンクで移動した先にあるE要素にマッチ
E:enabled 状態擬似クラス [E:enabled]要素が有効状態のときのE要素にマッチ
E:disabled 状態擬似クラス [E:disabled]要素が無効状態のときのE要素にマッチ
E:checked 状態擬似クラス チェック有効状態のE要素にマッチ
E:not(F) 定擬似クラス E要素のうち、F以外のものにマッチ

CSS2セレクタ一覧

パターンセレクタ名説明
* ユニバーサルセレクタ 全ての要素にマッチ
E(要素名) タイプセレクタ Eという名称の要素にマッチ
E#id_name クラスセレクタ [id_name]というID名のE要素にマッチ
E.class_name クラスセレクタ [class_name]というクラス名のE要素にマッチ
E F 子孫セレクタ E要素の子孫であるF要素にマッチ
E > F 子孫セレクタ E要素の子であるF要素にマッチ
E + F 隣接セレクタ E要素の直後にあるF要素にマッチ
E[foo] 属性セレクタ [foo]属性が設定されたE要素にマッチ
E[foo="bar"] 属性セレクタ [foo]の属性値が[bar]と完全に一致するE要素にマッチ
E[foo~="bar"] 属性セレクタ [foo]の属性が空白区切りで複数あり、その中の一つでも[bar]という値が含まれている場合のE要素にマッチ
E[hreflang|="en"] 属性セレクタ hreflang(lang)属性がハイフン区切りの前方一致でenの値のE要素にマッチ
E:link
E:visited
リンク擬似クラス [:link]はアンカーのリンク先が未訪問であるE要素に適用、[:visited]はリンク先が訪問済みのE要素にマッチ
E:hover
E:active
E:focus
ダイナミック疑似クラス [:hover]は、主にマウスカーソルがE要素の上に乗った時にマッチ。
[:active]は、主に指定されたE要素のリンクをクリックした時にマッチ。
[:focus]は、主にテキスト入力などでE要素がフォーカスされた場合にマッチ。
E:lang(en) 言語擬似クラス [en]という言語のE要素にマッチ
E:first-child :first-child疑似クラス ある要素の中に含まれる最初のE要素にマッチ
E:first-line :first-line疑似要素 E要素の最初の一行のみマッチ
E:first-letter :first-letter疑似要素 E要素の最初の一文字のみマッチ
E:before :before疑似要素 E要素の前に生成される内容にマッチ
E:after :after疑似要素 E要素の後に生成される内容にマッチ

こちらの記事でも詳しくまとめられています。

保存版!CSS3セレクタの説明書|Webpark - Webpark - FC2
http://weboook.blog22.fc2.com/blog-entry-287.html

CSS2.1とCSS3で使えるセレクタ一覧表 | ウェブランサー
http://weblan3.com/css/reference-css-selecta.php

まとめ

こんなにたくさんのセレクタが追加されています。
冒頭でも述べましたが、全てを覚える必要はありません。
必要だと思ったものから覚えていきましょう。
これらのセレクタを使用することで今までに出来なかった表現が実現でき、Webの可能性がどんどん広がっていきます。