CSS2~3 ブラウザ対応状況
ネタもとはここらへんです。CSS Browser Support
Selector | IE8 | IE7 | IE6 | FF3.5 | FF3.0 | FF2.0 | Chrome | Op9.0 | Mac Saf4 |
Mac Saf3.2 |
---|---|---|---|---|---|---|---|---|---|---|
* | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
E | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
.class | ○ | ○ | △ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
#id | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
E F | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
E > F | ○ | ○ | × | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
E + F | ○ | ○ | × | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
E ~ F | ○ | ○ | × | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
E[attr] | △ | △ | × | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
E[attr=val] | ○ | ○ | × | ○ | ○ | △ | ○ | △ | ○ | ○ |
E[attr~=val] | ○ | △ | × | ○ | ○ | △ | ○ | ○ | ○ | ○ |
E[attr|=val] | ○ | △ | × | ○ | ○ | △ | ○ | ○ | ○ | ○ |
E[attr^=val] | ○ | × | × | ○ | ○ | △ | ○ | × | ○ | ○ |
E[attr$=val] | ○ | × | × | ○ | ○ | △ | ○ | × | ○ | ○ |
E[attr*=val] | ○ | × | × | ○ | ○ | △ | ○ | ○ | ○ | ○ |
:first-child | ○ | △ | × | ○ | ○ | △ | ○ | △ | ○ | ○ |
:link | ○ | ○ | ○ | ○ | ○ | ○ | ○ | × | ○ | ○ |
:visited | ○ | ○ | ○ | ○ | ○ | ○ | ○ | × | ○ | ○ |
:lang() | ○ | × | × | ○ | ○ | ○ | ○ | △ | ○ | ○ |
:before | ○ | × | × | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
::before | × | × | × | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
:after | ○ | × | × | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
::after | × | × | × | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
:first-letter | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
::first-letter | × | × | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
:first-line | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
::first-line | × | × | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
:root | × | × | × | ○ | ○ | ○ | ○ | × | ○ | ○ |
:last-child | × | × | × | ○ | ○ | △ | ○ | × | ○ | ○ |
:only-child | × | × | × | ○ | ○ | △ | ○ | × | ○ | ○ |
:nth-child() | × | × | × | ○ | × | × | ○ | × | ○ | ○ |
:nth-last-child() | × | × | × | ○ | × | × | ○ | × | ○ | ○ |
:first-of-type | × | × | × | ○ | × | × | ○ | × | ○ | ○ |
:last-of-type | × | × | × | ○ | × | × | ○ | × | ○ | ○ |
:only-of-type | × | × | × | ○ | × | × | ○ | × | ○ | ○ |
:nth-of-type() | × | × | × | ○ | × | × | ○ | × | ○ | ○ |
:nth-last-of-type() | × | × | × | ○ | × | × | ○ | × | ○ | ○ |
:empty | × | × | × | ○ | ○ | △ | ○ | × | ○ | ○ |
:not() | × | × | × | ○ | ○ | ○ | ○ | × | ○ | ○ |
:target | × | × | × | ○ | ○ | ○ | ○ | × | ○ | ○ |
:enabled | × | × | × | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
:disabled | × | × | × | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
:checked | × | × | × | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
- E > F 子セレクタ(CSS2)
- 直接の子要素にのみ適用。孫要素は非適用。
- E + F 隣接セレクタ(CSS2)
- 親要素内で同列に存在する要素(兄弟関係の要素)で直後(隣接)に出現する弟要素に適用。
- E ~ F 間接セレクタ(CSS3)
- 隣接セレクタでは直後に出現する弟要素のみに適用されるのに対し、間接セレクタは全ての弟要素に適用。
- E[attr] 属性セレクタ(CSS2)
- 要素内で指定した属性を持つ要素に対して適用。
- ex. div[id] { ... } id属性を持つdiv要素に適用される。
- E[attr=val] 属性セレクタ(CSS2)
- 要素内で指定した属性と値が一致した要素に対して適用。
- ex. div[id="foo"] { ... } id属性の値がfooのdiv要素に適用される。
- E[attr~=val] 属性セレクタ(CSS2)
- 要素内で指定した属性に指定した値が含まれている要素に対して適用(要するに複数の値を持っていていずれかの値と一致すれば適用される)。
- ex. div[class~="foo"] { ... } class属性の値にfooが含まれていた場合に適用される。
- E[attr|=val] 属性セレクタ(CSS2)
- 要素内で指定した属性を持ち、かつ属性値が指定した語句で始まっている場合に適用。
- どうやらlang属性で指定した言語をセレクタとする場合に用いられるらしいです。(詳しい解説)
- E[attr^=val] 属性セレクタ(CSS3)
- 要素内で指定した属性を持ち、指定した値の文字の中で前方向の文字が一致した場合に適用(前方一致)。
- ex. a[href^="http"] { ... } a要素でhref属性を持ち、値の先頭にhttpの文字が含まれる場合に適用される。
- E[attr$=val] 属性セレクタ(CSS3)
- 要素内で指定した属性を持ち、指定した値の文字の中で後方向の文字が一致した場合に適用(後方一致)。
- ex. a[href$="pdf"] { ... } a要素でhref属性を持ち、値の後にpdfの文字が含まれる場合に適用される。
- E[attr*=val] 属性セレクタ(CSS3)
- 要素内で指定した属性を持ち、指定した値の文字が含まれていた場合に適用(ワイルドカード)。
- ex. div[class*="foo"] { ... } class属性の値にfooの文字が含まれている場合に適用される。
- :first-child 疑似クラス(CSS2)
- 親要素内で最初に出現する子要素に適用。
※指定した子要素より前に同列の要素(兄弟要素)がある場合適用されないので注意。 - ex. .nav li:first-child { ... } .nav要素の最初のli要素に適用される。
-
ex.
HTML Code<div> <h2>head2</h2> <h3>head3</h3> <p>paragraph, paragraph</p> <p>paragraph, paragraph</p> <p>paragraph, paragraph</p> </div>
CSS Code
div p:first-child { color: red; }
この場合、p要素よりも前に同列要素であるh2、h3要素が存在するためにこのスタイルは無効になる。同列要素が存在する可能性がある場合はfirst-of-type疑似クラスを利用する。
- :last-child 疑似クラス(CSS3)
- 親要素内で最後に出現する子要素に適用。
※指定した子要素の後に同列の要素(兄弟要素)がある場合適用されないので注意(同列要素が存在する可能性がある場合はlast-of-type疑似クラスを利用)。 - ex. .nav li:last-child { ... } .nav要素の最後のli要素に適用される。
- :before(CSS2), ::before 疑似要素(CSS3)
- 要素に含まれる内容の前に指定した内容を生成
- :after(CSS2), ::after 疑似要素(CSS3)
- 要素に含まれる内容の後に指定した内容を生成
- :first-letter(CSS1), ::first-letter 疑似要素(CSS3)
- 最初の一文字にのみ適用。※ブロック要素にのみ有効。
- :first-line(CSS1), ::first-line 疑似要素(CSS3)
- 最初の一行にのみ適用。 ※ブロック要素にのみ有効。
- :root 疑似クラス(CSS3)
- ドキュメント内のルート要素に適用。(X)HTMLにおいてはhtml要素、XMLにおいてはDTDで指定されたルート要素。
- :only-child 疑似クラス(CSS3)
- 親要素内で唯一の子要素しか存在しない場合に適用。
※指定した子要素の他に同列の要素(兄弟要素)が存在する場合は適用されないので注意(同列要素が存在する可能性がある場合はonly-of-type疑似クラスを利用)。 - ex. div p:only-child { ... } div要素内で一つしか子要素が存在しない場合かつ子要素がp要素の場合に適用される。
- :nth-child() 疑似クラス(CSS3)
- 親要素内のn番目の子要素に適用。odd(奇数)、even(偶数)を指定することや3n+1,3n+2,3n+3の様な指定で3つのグループを繰り返す事が可能。
※親要素内の子要素全てにあてはまるので注意(同列の要素が存在する可能性がある場合はnth-of-type疑似クラスを利用)。 - ex. ul li:nth-child(2) { ... } ul要素の子要素で2番目のli要素に適用される。
-
ex.
HTML Code<div> <h2>head2</h2> <h3>head3</h3> <p>paragraph, paragraph</p> <p>paragraph, paragraph</p> <p>paragraph, paragraph</p> </div>
CSS Code
div p:nth-child(3n+1) { color: red; } div p:nth-child(3n+2) { color: blue; } div p:nth-child(3n+3) { color: yellow; }
この場合、h2がdivの一番目の子要素でh3が二番目の子要素になるため、最初のp要素は3番目のスタイルであるdiv p:nth-child(3n+3)が適用される。
- :nth-last-child() 疑似クラス(CSS3)
- 親要素内の最後から数えてn番目の子要素に適用。※指定した子要素より後に同列の要素が存在する場合はその要素も数に数えられるので注意(同列要素に影響されたく無い場合は:nth-last-of-type疑似クラスを利用)。
- :first-of-type 疑似クラス(CSS3)
- 親要素内で最初に出現する要素に適用(同列の要素を省く)。
-
ex.
HTML Code<div> <h2>head2</h2> <h3>head3</h3> <p>paragraph, paragraph</p> <p>paragraph, paragraph</p> <p>paragraph, paragraph</p> </div>
CSS Code
div p:first-of-type { color: red; }
- :last-of-type 疑似クラス(CSS3)
- 親要素内で最後に出現する要素に適用(同列の要素を省く)。
- :only-of-type 疑似クラス(CSS3)
- 親要素内で唯一の要素に適用(同列の要素が存在していても適用される)。
- :nth-of-type() 疑似クラス(CSS3)
- 親要素内のn番目の子要素に適用(同列の要素を省く)。
- :nth-last-of-type() 疑似クラス(CSS3)
- 親要素内の後からn番目の子要素に適用(同列の要素を省く)。
- :empty 疑似クラス(CSS3)
- 子要素を持たない(テキストノードも含める)要素に適用。
- :not() 疑似クラス(CSS3)
- 指定した値以外の要素に適用。
- ex. p:not(.foo) { ... } p要素でクラス属性がfooでない要素に適用される。
- :target 疑似クラス(CSS3)
- 要素の参照するURIにアンカーリンクが指定されているリンクをアクティブにした場合、そのターゲットとなる要素に適用する。
-
ex.
HTML Code<p><a href="#foo">ID fooへ飛ぶ</a></p> <div id="foo"> <h2>head2</h2> <h3>head3</h3> <p>paragraph, paragraph</p> <p>paragraph, paragraph</p> <p>paragraph, paragraph</p> </div>
CSS Code
*:target { color: red; }
#fooへのリンクがアクティブになった時に#fooの要素の文字が赤になる。
- :enabled, :disabled 疑似クラス(CSS3)
- 有効な要素(enabled)、無効な要素(disabled)に対して適用。
- :checked 疑似クラス(CSS3)
- ラジオボタンやチェックボックスがチェックされた状態のときに適用。
内容が間違っていたら教えてください。それにしてもIE8はCSS3全滅ですな...