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以下はダメだし使えない」と思う方もいるかもしれませんが、セレクタに関しては簡単に対応できます。
それでは、個別のセレクタについてサンプルを交えて説明します。
属性セレクタ
まずは属性セレクタです。属性のマッチングに関するセレクタです。今回はすべてhref属性を例にしましたが、target属性やtittle属性なんかも結構使えます。
1. E[foo^="bar"]
foo属性の値がbarで始まっているE要素という意味で、具体的には以下のように使います。
CSS
1
a[href^="http"] {
2
background:url(img/sample.png) no-repeat right center;
3
padding-right:10px;
4
}
この場合、href属性の値がhttpで始まっているa要素に適用されます。つまり絶対パスで始まるリンクに適用されます。
html
1
<a href="http://example.com">このリンクには適用されます</a>
2
<a href="example.html">このリンクには適用されません</a>
2. E[foo$="bar"]
foo属性の値がbarで終わっているE要素という意味で、以下のように使います。
CSS
1
a[href$="pdf"] {
2
background:url(img/sample.png) no-repeat right center;
3
padding-right:10px;
4
}
この場合、href属性の値がpdfで終わっているa要素に適用されます。つまりpdfファイルへのリンクに適用されます。
html
1
<a href="http://example.com/sample.pdf">このリンクには適用されます</a>
2
<a href="http://example.com/sample.xml">このリンクには適用されません</a>
3. E[foo*="bar"]
foo属性の値にbarを含むE要素という意味で、以下のように使います。
CSS
1
a[href*="example"] {
2
background:url(img/sample.png) no-repeat right center;
3
padding-right:10px;
4
}
この場合、href属性に「example」という文字が含まれていれば適用されます。
html
1
<a href="http://example.com/">このリンクには適用されます</a>
2
<a href="http://test.com/">このリンクには適用されません</a>
擬似クラス（Structural pseudo-classes）
周りの状況によって特定されるものや、ユーザー操作によって特定されるセレクタです。似たようなものが多くややこしいですので、違いが分かるようできるだけ同じサンプルを使用します。
4. E:root
文章内のルート要素であるEという要素という意味で、以下のように使います。
1
:root {
2
background:#ff0000;
3
}
ルート要素は最上位の要素ですので、一般的にはhtml要素になるかと思います。
いまいち効果的な使い方が思いつかない。。
5. E:nth-child(n)
親要素のn番目の子要素という意味で、以下のように使います。
CSS
1
div p:nth-child(5){
2
color : red;
3
}
この場合、親要素(div)のn(5)番目の子要素であるE(p)要素に適用されます。
5番目の子要素がp要素でない場合はどこにも適用されません。
html
1
<div>
2
<p>1つ目のp要素</p>
3
<p>2つ目のp要素</p>
4
<p>3つ目のp要素</p>
5
<h6>h6要素</h6>
6
<p>4つ目のp要素</p> ← ここに適用
7
<p>5つ目のp要素</p>
8
<p>6つ目のp要素</p>
9
</div>
nの値については数字で以外にも色々な指定方法があります。
2 ･･･ 2番目の要素に適用
odd ･･･ 奇数番目の要素に適用
2n+1 ･･･ 奇数番目の要素に適用
even ･･･ 偶数番目の要素に適用
2n ･･･ 偶数番目の要素に適用
3n ･･･ 3,6,9,12…番目の要素に適用
3n+1 ･･･ 1,4,7,10…番目の要素に適用
これを使えば利用の幅がかなり広がります。
【2011.12.21 追記】
5と7、6と8の「← ここに適用」の場所が反対になっていましたので修正しました。長期間間違えた状態になっており、皆様にはご迷惑をおかけしました。説明文については間違えありません。
6. E:nth-last-child(n)
親要素の後から数えてn番目の子要素という意味で、先ほどの「E:nth-child(n)」を後ろから数えたものですね。
CSS
1
div p:nth-last-child(5){
2
color : red;
3
}
この場合、親要素(div)の後ろから数えてn(5)番目の子要素であるE(p)要素に適用されます。
後ろから5番目の子要素がp要素でない場合はどこにも適用されません。
html
1
<div>
2
<p>1つ目のp要素</p>
3
<p>2つ目のp要素</p>
4
<p>3つ目のp要素</p> ← ここに適用
5
<h6>h6要素</h6>
6
<p>4つ目のp要素</p>
7
<p>5つ目のp要素</p>
8
<p>6つ目のp要素</p>
9
</div>
7. E:nth-of-type(n)
n番目にあるE要素という意味で、以下のように使います。
CSS
1
div p:nth-of-type(5){
2
color : red;
3
}
この場合、親要素(div)内で兄弟関係にあるE(p)要素でn(5)番目のものに適用されます。
html
1
<div>
2
<p>1つ目のp要素</p>
3
<p>2つ目のp要素</p>
4
<p>3つ目のp要素</p>
5
<h6>h6要素</h6>
6
<p>4つ目のp要素</p>
7
<p>5つ目のp要素</p> ← ここに適用
8
<p>6つ目のp要素</p>
9
</div>
この場合、div内の子要素全体の中で5番目のものになります。5番目がp要素でない場合は、どこにも適用されません。
div要素内で5番目にある要素が何であろうと適用させるには以下のコードで。
CSS
1
div *:nth-of-type(5){
2
color : red;
3
}
「*」はユニバーサルセレクタといってすべての要素に適用させるセレクタになります。
8. E:nth-last-of-type(n)
最後から数えてn番目にあるE要素という意味です。先ほどの「E:nth-of-type(n)」を後ろから数えたものですね。
CSS
1
div p:nth-last-of-type(5){
2
color : red;
3
}
この場合、親要素(div)内で兄弟関係にあるE(p)要素で後ろから数えてn(5)番目のものに適用されます。
html
1
<div>
2
<p>1つ目のp要素</p>
3
<p>2つ目のp要素</p> ← ここに適用
4
<p>3つ目のp要素</p>
5
<h6>h6要素</h6>
6
<p>4つ目のp要素</p>
7
<p>5つ目のp要素</p>
8
<p>6つ目のp要素</p>
9
</div>
9. E:last-child
最後にある子要素という意味で、以下のように使います。
CSS
1
div p:last-child{
2
color : red;
3
}
この場合、親要素(div)内で最後にある子要素であるp要素に適用されます。
ちなみに最初の子要素に適用させるのは「E:first-child」となります。これはCSS2で定義されています。
html
1
<div>
2
<p>1つ目のp要素</p>
3
<p>2つ目のp要素</p>
4
<p>3つ目のp要素</p> ← ここに適用
5
</div>
最後の子要素がp要素でない場合はどこにも適用されません。以下のような場合ですね。
html
1
<div>
2
<h6>h6要素</h6>
3
<p>1つ目のp要素</p>
4
<p>2つ目のp要素</p>
5
<p>3つ目のp要素</p>
6
<div>div要素</div>
7
</div>
どの要素でもとにかく最後の要素に適用させるには以下のようにします。
CSS
1
div *:last-child{
2
color : red;
3
}
「*」はすべてに適用するセレクタです。
10. E:first-of-type
兄弟関係にあるE要素で最初のものという意味で、以下のように使います。
CSS
1
div p:first-of-type{
2
color : red;
3
}
この場合、親要素(div)内で兄弟関係にあるp要素の中で最初のものに適用されます。
html
1
<div>
2
<h6>h6要素</h6>
3
<p>1つ目のp要素</p> ← ここに適用
4
<p>2つ目のp要素</p>
5
<p>3つ目のp要素</p>
6
</div>
「first-child」と似ていますので注意してくださいね。
11. E:last-of-type
兄弟関係にあるE要素で最後のものという意味で、以下のように使います。
CSS
1
div p:last-of-type{
2
color : red;
3
}
この場合、親要素(div)内で兄弟関係にあるp要素の中で最後のものに適用されます。
html
1
<div>
2
<h6>h6要素</h6>
3
<p>1つ目のp要素</p>
4
<p>2つ目のp要素</p>
5
<p>3つ目のp要素</p> ← ここに適用
6
</div>
12. E:only-child
唯一の子要素であるE要素という意味で、以下のように使います。
CSS
1
div p:only-child{
2
color : red;
3
}
この場合、唯一の子要素であるp要素に適用されます。子要素が複数ある場合は適用されません。
html
01
<div>
02
<h6>h6要素</h6>
03
<p>1つ目のp要素</p>
04
<p>2つ目のp要素</p>
05
<p>3つ目のp要素</p>
06
</div>
07
<div>
08
<h6>h6要素</h6>
09
<p>1つ目のp要素</p>
10
</div>
11
<div>
12
<p>3つ目のp要素</p> ← ここに適用
13
</div>
次に紹介する「E:only-of-type」との違いは要注意です。
13. E:only-of-type
子要素の中で唯一のE要素という意味で、以下のように使います。
CSS
1
div p:only-of-type{
2
color : red;
3
}
この場合、div要素内の子要素の中で唯一のp要素に適用されます。p要素が複数ある場合（兄弟関係にあるp要素がある場合）は適用されません。
html
01
<div>
02
<h6>h6要素</h6>
03
<p>1つ目のp要素</p>
04
<p>2つ目のp要素</p>
05
<p>3つ目のp要素</p>
06
</div>
07
<div>
08
<h6>h6要素</h6>
09
<p>1つ目のp要素</p> ← ここに適用
10
</div>
11
<div>
12
<p>3つ目のp要素</p> ← ここに適用
13
</div>
先ほどの「E:only-child」と違い、子要素が幾つあってもp要素が1つであれば適用されます。
14. E:empty
子要素を持たないE要素という意味で、以下のように使います。
CSS
1
p:empty{
2
display : none
3
}
p要素のなかに子要素や文字など何もない場合に適用されます。この例でしたら間違えて中身を入れずに残ってしまった空の要素を、表示しないようにします。
html
1
<div>
2
<p></p> ← ここに適用
3
<p>中に文字あり</p>
4
<p><strong>子要素あり</strong></p>
5
</div>
ターゲット擬似クラス
15. E:target
参照URIの目標となっているE要素という意味で、以下のように使います。
CSS
1
p:target{
2
color:red;
3
}
「http://weboook.blog22.fc2.com#sample」とページ内で移動したときにターゲットとなったp要素に適用されます。
html
1
<a href="#sample">サンプルリンク</a>
2
<p id="sample">ここに適用</p>
この場合、リンクをクリックすると、id=sampleのp要素に移動し、そのp要素にスタイルが適用されることになります。
UI擬似クラス
ユーザーインターフェイスに関する擬似クラスです。
16. E:enabled
有効になっている（:enabled）E要素という意味で、以下のように使います。
CSS
1
textarea:enabled{
2
background:#fff;
3
}
この場合、有効になっているテキストエリアに適用されます。
もちろん普段は有効になっています。つまりdisable指定していないテキストエリアに適用されます。
17. E:disabled
無効になっている（:disabled）E要素という意味で、以下のように使います。
CSS
1
textarea:disabled{
2
background:#ddd;
3
}
この場合、無効になっているテキストエリアに適用されます。以下のようにdisableで無効化されている場合に適用されます。
1
<input type="text" name="sample" size="50" value="サンプル" disabled="">
18. E:checked
ラジオボタンやチェックボックスがチェックされた状態のときのE要素で、以下のように使います。
CSS
1
input[type=radio]:checked + label {
2
color: red;
3
font-weight:bold;
4
}
チェックされたボタンに直接スタイルを適用するのではなく、その隣のラベルに適用します。
html
1
<form>
2
<input type="radio" name="btn" value="sample1">
3
<label>ボタン1</label>
4
<input type="radio" name="btn" value="sample2">
5
<label>ボタン2</label>
6
</form>
以下は簡単なサンプルになります。チェックするとテキストの色が変わることが分かります。
ボタン1 ボタン2
否定的擬似クラス
「～でない」ものに適用する擬似クラスです。
19. E:not(s)
sでないセレクタを持つE要素という意味で、以下のように使います。
CSS
1
p:not(#sample) {
2
font-size:18px;
3
}
指定したセレクタに該当しない場合にスタイルが適用されます。
CSS
1
body *:not(strong) {
2
font-size:18px;
3
}
この場合「sample」というidを付けられたp要素以外にスタイルが適用されます。つまり、strong要素以外のすべてにスタイルが適用されます。
General sibling combinator
いい訳が思いつかなかったのでそのまま英語で載せてます。
20. E ~ F
E要素の後にあるF要素という意味で、以下のように使います。
CSS
1
h4 ~ p {
2
color:red;
3
font-weight:bold;
4
}
h4要素の後にあるp要素に適用されます。
html
1
<p>h4要素のの前なので適用されません</p>
2
<h4>H4要素</h4>
3
<p>h4要素の後にあると適用されます</p>
4
<p>h4要素の後にあると適用されます</p>
h4要素と兄弟関係にありh4要素より後にあるすべてのp要素の文字が赤になります。
最後に
ということでCSS3セレクタをすべて解説しました。
まだまだ見慣れないセレクタもたくさんありますが、使い方によっては作業効率が改善されたり、今までCSSで表現できなかったこともできたりします。
0 件のコメント:
コメントを投稿