スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

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

CSS3で一気に増えたセレクタですが、ちゃんと理解できていないものもあるのではないでしょうか?ということでCSS3で追加されたセレクタをすべて説明します。

css-selector-tittle.png

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

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-selector.png

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

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

css-selector-html3.png

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

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

css-selector-oyako.png

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

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

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

属性セレクタ

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

1. E[foo^="bar"]

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

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

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

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

2. E[foo$="bar"]

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

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

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

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

3. E[foo*="bar"]

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

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

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

html
<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番目の子要素という意味で、以下のように使います。

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

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

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

html
<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の値については数字で以外にも色々な指定方法があります。

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
div p:nth-last-child(5){
  color : red;
}

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

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

html

1つ目のp要素

2つ目のp要素

3つ目のp要素

 ← ここに適用
h6要素

4つ目のp要素

5つ目のp要素

6つ目のp要素

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

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

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

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

html

1つ目のp要素

2つ目のp要素

3つ目のp要素

h6要素

4つ目のp要素

5つ目のp要素

 ← ここに適用

6つ目のp要素

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

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

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

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

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

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

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

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

html

1つ目のp要素

2つ目のp要素

 ← ここに適用

3つ目のp要素

h6要素

4つ目のp要素

5つ目のp要素

6つ目のp要素

9. E:last-child

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

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

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

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

html

1つ目のp要素

2つ目のp要素

3つ目のp要素

 ← ここに適用

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

html
h6要素

1つ目のp要素

2つ目のp要素

3つ目のp要素

div要素

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

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

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

10. E:first-of-type

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

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

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

html
h6要素

1つ目のp要素

 ← ここに適用

2つ目のp要素

3つ目のp要素

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

11. E:last-of-type

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

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

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

html
h6要素

1つ目のp要素

2つ目のp要素

3つ目のp要素

 ← ここに適用

12. E:only-child

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

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

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

html
h6要素

1つ目のp要素

2つ目のp要素

3つ目のp要素

h6要素

1つ目のp要素

3つ目のp要素

 ← ここに適用

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

13. E:only-of-type

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

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

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

html
h6要素

1つ目のp要素

2つ目のp要素

3つ目のp要素

h6要素

1つ目のp要素

 ← ここに適用

3つ目のp要素

 ← ここに適用

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

14. E:empty

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

CSS
p:empty{
  display : none
}

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

html

 ← ここに適用

中に文字あり

子要素あり

ターゲット擬似クラス

15. E:target

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

CSS
p:target{
color:red;
}

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

html
サンプルリンク

ここに適用

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

UI擬似クラス

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

16. E:enabled

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

CSS
textarea:enabled{
  background:#fff;
}

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

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

17. E:disabled

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

CSS
textarea:disabled{
  background:#ddd;
}

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

18. E:checked

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

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

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

html
<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要素という意味で、以下のように使います。

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

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

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

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

General sibling combinator

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

20. E ~ F

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

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

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

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

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

最後に

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

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

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

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント
9. E:last-child
ここの説明が違うような
【2011/10/12 09:28】 | - #- | [edit]
「要素」と「タグ」が入り混じってますが、意図があるのでしょうか。全く違う用語ですが。

selection疑似要素はだいぶ前に仕様から落ちました。
【2011/10/12 11:21】 | - #- | [edit]
ご指摘ありがとうございます。

ここでの説明で「タグ」という表現は適当ではありませんので「要素」に修正いたしました。

9番については「最初」と「最後」の文字が入り交じってしまい一部間違えておりましたので修正しています。

selection疑似要素については削除していります。
http://www.w3.org/TR/css3-selectors/#selectors

ご迷惑おかけし申し訳ございませんでした。
そして、本当にありがとうございました。
【2011/10/12 12:50】 | 管理人 #E2ywrYdA | [edit]
「20. E ~ F」の

> h4要素に隣接しているp要素の文字が赤になります。

は間違いです。親が同じであるh4要素の後ろ(直後でなくてもよい)にあるp要素(いわばh4要素の弟であるp要素)の文字が赤になります。

「General sibling combinator」の訳としては、「一般兄弟結合子」が妥当だと思います。
【2011/10/12 18:24】 | シマダ #5WxxqtjY | [edit]
シマダさま

ご指摘ありがとうございます。

入念に見直したつもりでしたが、ほんと情けないです。

「一般兄弟結合子」
参考にさせていただきます。
【2011/10/12 19:33】 | 管理人 #E2ywrYdA | [edit]
やってみたら、かなり赤くなる位置がちがいます。
5~9が今、試しても違いますよ。



【2011/12/20 14:50】 | レイコ #- | [edit]
レイコ さん

ご指摘ありがとうございます。

5と7、6と8の「← ここに適用」の場所が反対になっていました。

9は2つ目のサンプルがp要素で終わっているので、
div要素を付け足してどこにも適用しないようにしました。

間違い多くて情けないです。
本当にありがとうございます。

これからもよろしくお願いします。
【2011/12/20 20:44】 | ajaxjp014 #E2ywrYdA | [edit]
とても魅力的な記事でした!!
また遊びに来ます!!
ありがとうございます。。
【2012/02/07 10:54】 | 職務経歴書の書き方 #- | [edit]
職務経歴書の書き方 さん

ありがとうございます。
とても励みになります。

またお立ち寄りください。
【2012/02/07 21:50】 | 管理人 #E2ywrYdA | [edit]
まだcssを勉強し始めたばかりで大変詳しい説明で参考になります。ちょくちょく立ち寄らせていただきます。
【2012/08/14 21:54】 | joker #/.bpAT1M | [edit]
joker さん

コメントありがとうございます。
私もまだまだ勉強中ですがお役に立ててうれしいです。

またお立ち寄りください~
【2012/08/14 22:20】 | 管理人 #E2ywrYdA | [edit]
はてなブックマークからきました

とても参考になりました

ありがとうございます
【2013/05/01 07:12】 | ユッキー #MP6OAdhI | [edit]
なるほど

参考になりました

他の記事も拝見させていただきます

ありがとうございます
【2013/05/02 13:41】 | 毒舌野郎 #MP6OAdhI | [edit]
はじめまして

とても参考になりました!

これからもがんばってください
【2016/01/28 13:24】 | etAin #- | [edit]









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。