保存版！CSS3セレクタの説明書

大げさなタイトルに負けない内容になっているはずですので、これを機にぜひ勉強していってください。

CSS3セレクタ一覧

CSS3セレクタの一覧です。クリックすると個別の説明まで移動します。

	セレクタ	意味
1	E[foo^="bar"]	foo属性の値がbarで始まっているE要素
2	E[foo$="bar"]	foo属性の値がbarで終わっているE要素
3	E[foo*="bar"]	foo属性の値にbarを含むE要素
4	E:root	文章内のルート要素であるEという要素
5	E:nth-child(n)	親要素のn番目の子要素
6	E:nth-last-child(n)	親要素の後から数えてn番目の子要素
7	E:nth-of-type(n)	n番目にあるE要素
8	E:nth-last-of-type(n)	最後から数えてn番目にあるE要素
9	E:last-child	最後にある子要素
10	E:first-of-type	兄弟関係にあるE要素で最初のもの
11	E:last-of-type	兄弟関係にあるE要素で最後のもの
12	E:only-child	唯一の子要素であるE要素
13	E:only-of-type	子要素の中で唯一のE要素
14	E:empty	子要素を持たないE要素
15	E:target	参照URIの目標となっているE要素
16	E:enabled	有効になっている（:enabled）E要素
17	E:disabled	無効になっている（:disabled）E要素
18	E:checked	ラジオボタンやチェックボックスがチェックされた状態のときにE要素
19	E:not(s)	sでないセレクタを持つE要素
20	E ~ F	E要素の後にあるF要素

CSSセレクタについての基礎知識

このブログで何回も説明していますが、念のために説明します。

CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。

セレクタ表の説明には属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。

私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。

あと親子関係や兄弟関係などもあまり聞きなれないかもしれません。下の階層にある要素との関係が親子関係で、同じ階層にある要素同士の関係が兄弟関係です。

あと、CSS3と聞いて「どうせIE8以下はダメだし使えない」と思う方もいるかもしれませんが、セレクタに関しては簡単に対応できます。

IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」をご参考に。

それでは、個別のセレクタについてサンプルを交えて説明します。

属性セレクタ

まずは属性セレクタです。属性のマッチングに関するセレクタです。今回はすべてhref属性を例にしましたが、target属性やtittle属性なんかも結構使えます。

1. E[foo^="bar"]

foo属性の値がbarで始まっているE要素という意味で、具体的には以下のように使います。

a[href^="http"] {
  background:url(img/sample.png) no-repeat right center;
  padding-right:10px;
}

この場合、href属性の値がhttpで始まっているa要素に適用されます。つまり絶対パスで始まるリンクに適用されます。

<a href="http://example.com">このリンクには適用されます</a>
<a href="example.html">このリンクには適用されません</a>

2. E[foo$="bar"]

foo属性の値がbarで終わっているE要素という意味で、以下のように使います。

a[href$="pdf"] {
  background:url(img/sample.png) no-repeat right center;
  padding-right:10px;
}

この場合、href属性の値がpdfで終わっているa要素に適用されます。つまりpdfファイルへのリンクに適用されます。

<a href="http://example.com/sample.pdf">このリンクには適用されます</a>
<a href="http://example.com/sample.xml">このリンクには適用されません</a>

3. E[foo*="bar"]

foo属性の値にbarを含むE要素という意味で、以下のように使います。

a[href*="example"] {
  background:url(img/sample.png) no-repeat right center;
  padding-right:10px;
}

この場合、href属性に「example」という文字が含まれていれば適用されます。

<a href="http://example.com/">このリンクには適用されます</a>
<a href="http://test.com/">このリンクには適用されません</a>

擬似クラス（Structural pseudo-classes）

周りの状況によって特定されるものや、ユーザー操作によって特定されるセレクタです。似たようなものが多くややこしいですので、違いが分かるようできるだけ同じサンプルを使用します。

4. E:root

文章内のルート要素であるEという要素という意味で、以下のように使います。

:root {
  background:#ff0000;
}

ルート要素は最上位の要素ですので、一般的にはhtml要素になるかと思います。

いまいち効果的な使い方が思いつかない。。

5. E:nth-child(n)

親要素のn番目の子要素という意味で、以下のように使います。

div p:nth-child(5){
  color : red;
}

この場合、親要素(div)のn(5)番目の子要素であるE(p)要素に適用されます。

5番目の子要素がp要素でない場合はどこにも適用されません。

<div>
  <p>1つ目のp要素</p>
  <p>2つ目のp要素</p>
  <p>3つ目のp要素</p>
  <h6>h6要素</h6>
  <p>4つ目のp要素</p>　←　ここに適用
  <p>5つ目のp要素</p>
  <p>6つ目のp要素</p>
</div>

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

これを使えば利用の幅がかなり広がります。

6. E:nth-last-child(n)

親要素の後から数えてn番目の子要素という意味で、先ほどの「E:nth-child(n)」を後ろから数えたものですね。

div p:nth-last-child(5){
  color : red;
}

この場合、親要素(div)の後ろから数えてn(5)番目の子要素であるE(p)要素に適用されます。

後ろから5番目の子要素がp要素でない場合はどこにも適用されません。

  
1つ目のp要素
  
2つ目のp要素
  
3つ目のp要素
　←　ここに適用
  
h6要素
  
4つ目のp要素
  
5つ目のp要素
  
6つ目のp要素

7. E:nth-of-type(n)

n番目にあるE要素という意味で、以下のように使います。

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

この場合、親要素(div)内で兄弟関係にあるE(p)要素でn(5)番目のものに適用されます。

  
1つ目のp要素
  
2つ目のp要素
  
3つ目のp要素
  
h6要素
  
4つ目のp要素
  
5つ目のp要素
　←　ここに適用
  
6つ目のp要素

この場合、div内の子要素全体の中で5番目のものになります。5番目がp要素でない場合は、どこにも適用されません。

div要素内で5番目にある要素が何であろうと適用させるには以下のコードで。

div *:nth-of-type(5){
  color : red;
}

「*」はユニバーサルセレクタといってすべての要素に適用させるセレクタになります。

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

最後から数えてn番目にあるE要素という意味です。先ほどの「E:nth-of-type(n)」を後ろから数えたものですね。

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

この場合、親要素(div)内で兄弟関係にあるE(p)要素で後ろから数えてn(5)番目のものに適用されます。

  
1つ目のp要素
  
2つ目のp要素
　←　ここに適用
  
3つ目のp要素
  
h6要素
  
4つ目のp要素
  
5つ目のp要素
  
6つ目のp要素

9. E:last-child

最後にある子要素という意味で、以下のように使います。

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

この場合、親要素(div)内で最後にある子要素であるp要素に適用されます。

ちなみに最初の子要素に適用させるのは「E:first-child」となります。これはCSS2で定義されています。

  
1つ目のp要素
  
2つ目のp要素
  
3つ目のp要素
　←　ここに適用

最後の子要素がp要素でない場合はどこにも適用されません。以下のような場合ですね。

  
h6要素
  
1つ目のp要素
  
2つ目のp要素
  
3つ目のp要素
  
div要素

どの要素でもとにかく最後の要素に適用させるには以下のようにします。

div *:last-child{
  color : red;
}

「*」はすべてに適用するセレクタです。

10. E:first-of-type

兄弟関係にあるE要素で最初のものという意味で、以下のように使います。

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

この場合、親要素(div)内で兄弟関係にあるp要素の中で最初のものに適用されます。

  
h6要素
  
1つ目のp要素
　←　ここに適用
  
2つ目のp要素
  
3つ目のp要素

「first-child」と似ていますので注意してくださいね。

11. E:last-of-type

兄弟関係にあるE要素で最後のものという意味で、以下のように使います。

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

この場合、親要素(div)内で兄弟関係にあるp要素の中で最後のものに適用されます。

  
h6要素
  
1つ目のp要素
  
2つ目のp要素
  
3つ目のp要素
　←　ここに適用

12. E:only-child

唯一の子要素であるE要素という意味で、以下のように使います。

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

この場合、唯一の子要素であるp要素に適用されます。子要素が複数ある場合は適用されません。

  
h6要素
  
1つ目のp要素
  
2つ目のp要素
  
3つ目のp要素


  
h6要素
  
1つ目のp要素


  
3つ目のp要素
　←　ここに適用

次に紹介する「E:only-of-type」との違いは要注意です。

13. E:only-of-type

子要素の中で唯一のE要素という意味で、以下のように使います。

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

この場合、div要素内の子要素の中で唯一のp要素に適用されます。p要素が複数ある場合（兄弟関係にあるp要素がある場合）は適用されません。

  
h6要素
  
1つ目のp要素
  
2つ目のp要素
  
3つ目のp要素


  
h6要素
  
1つ目のp要素
　←　ここに適用


  
3つ目のp要素
　←　ここに適用

先ほどの「E:only-child」と違い、子要素が幾つあってもp要素が1つであれば適用されます。

14. E:empty

子要素を持たないE要素という意味で、以下のように使います。

p:empty{
  display : none
}

p要素のなかに子要素や文字など何もない場合に適用されます。この例でしたら間違えて中身を入れずに残ってしまった空の要素を、表示しないようにします。

  
　←　ここに適用
  
中に文字あり
  
子要素あり

ターゲット擬似クラス

15. E:target

参照URIの目標となっているE要素という意味で、以下のように使います。

p:target{
color:red;
}

「http://weboook.blog22.fc2.com#sample」とページ内で移動したときにターゲットとなったp要素に適用されます。

サンプルリンク
ここに適用

この場合、リンクをクリックすると、id=sampleのp要素に移動し、そのp要素にスタイルが適用されることになります。

UI擬似クラス

ユーザーインターフェイスに関する擬似クラスです。

16. E:enabled

有効になっている（:enabled）E要素という意味で、以下のように使います。

textarea:enabled{
  background:#fff;
}

この場合、有効になっているテキストエリアに適用されます。

もちろん普段は有効になっています。つまりdisable指定していないテキストエリアに適用されます。

17. E:disabled

無効になっている（:disabled）E要素という意味で、以下のように使います。

textarea:disabled{
  background:#ddd;
}

この場合、無効になっているテキストエリアに適用されます。以下のようにdisableで無効化されている場合に適用されます。

18. E:checked

ラジオボタンやチェックボックスがチェックされた状態のときのE要素で、以下のように使います。

input[type=radio]:checked + label {
  color: red;
  font-weight:bold;
}

チェックされたボタンに直接スタイルを適用するのではなく、その隣のラベルに適用します。

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

以下は簡単なサンプルになります。チェックするとテキストの色が変わることが分かります。

否定的擬似クラス

「～でない」ものに適用する擬似クラスです。

19. E:not(s)

sでないセレクタを持つE要素という意味で、以下のように使います。

p:not(#sample) {
  font-size:18px;
}

指定したセレクタに該当しない場合にスタイルが適用されます。

body *:not(strong) {
  font-size:18px;
}

この場合「sample」というidを付けられたp要素以外にスタイルが適用されます。つまり、strong要素以外のすべてにスタイルが適用されます。

General sibling combinator

いい訳が思いつかなかったのでそのまま英語で載せてます。

20. E ~ F

E要素の後にあるF要素という意味で、以下のように使います。

h4 ~ p {
  color:red;
  font-weight:bold;
}

h4要素の後にあるp要素に適用されます。

<p>h4要素のの前なので適用されません</p>
<h4>H4要素</h4>
<p>h4要素の後にあると適用されます</p>
<p>h4要素の後にあると適用されます</p>

h4要素と兄弟関係にありh4要素より後にあるすべてのp要素の文字が赤になります。

最後に

ということでCSS3セレクタをすべて解説しました。

まだまだ見慣れないセレクタもたくさんありますが、使い方によっては作業効率が改善されたり、今までCSSで表現できなかったこともできたりします。

この記事がCSS3セレクタを勉強するきっかけになれば幸いです。