Notice : 内容無保証。禁無断転載。リンク自由。

CSS Selector Test

セレクタのテスト。 以下のような構造の要素についてセレクタがどのように働くかを見る。 

 A
 |
 +---A/p [1]
 |
 +---B
 |   |
 |   +---C
 |   |   |
 |   |   +--A/B/C/p [2]
 |   |
 |   +---A/B/p [3]
 |   |
 |   +---A/B/p [4]
 |
 +---A/p [5]
 |
 +---A/p [6]

CSS 1

A p
Matches any p element that is a descendant of an A element.
A の子孫の p にマッチ。

A/p [1]

A/B/C/p [2]

A/B/p [3]

A/B/p [4]

A/p [5]

A/p [6]

B p
Matches any p element that is a descendant of a B element.
B の子孫の p にマッチ。

A/p [1]

A/B/C/p [2]

A/B/p [3]

A/B/p [4]

A/p [5]

A/p [6]

CSS 2

CSS 2 非対応の UA (IE6 等) では全くマッチしない。

A > p
Matches any p element that is a child of an element A.
A の子 (=孫は含まない直接の子) の p にマッチ。

A/p [1]

A/B/C/p [2]

A/B/p [3]

A/B/p [4]

A/p [5]

A/p [6]

A * p
* = Matches any element.
* は任意の要素(一つ以上)にマッチ。
なので A * p は、A の孫 (= 直接の子は含まない孫) の p にマッチ

A/p [1]

A/B/C/p [2]

A/B/p [3]

A/B/p [4]

A/p [5]

A/p [6]

p:first-child
Matches element p when p is the first child of its parent.
p が親要素の最初の子ならマッチ。

A/p [1]

A/B/C/p [2]

A/B/p [3]

A/B/p [4]

A/p [5]

A/p [6]

B + p
Matches any p element immediately preceded by an element B.
B のすぐ後に続く p にマッチ。

A/p [1]

A/B/C/p [2]

A/B/p [3]

A/B/p [4]

A/p [5]

A/p [6]

戻る
トップページに戻る