2. 疑似クラスと疑似要素
A. :hover 後の子孫セレクター
例
| a:ホバースパン{ 色: #0f0; } |
説明する
要素は、子孫セレクターと同様に、:hover 疑似クラスに続くセレクターによって配置できます。上記の例では、マウスをホバーすると、a 要素内のspan要素のテキストの色が変更されます。
サポート状況
| IE6 いいえ IE7はい IE8はい |
B. チェーン疑似クラス
例
| a:first-child:hover { 色: #0f0; } |
説明する
疑似クラスを連鎖させて要素の選択を絞り込むことができます。上記の例では、各親要素の下に最初の a タグを配置し、それにホバー疑似クラス P を適用します。
サポート状況
| IE6 いいえ IE7はい IE8はい |
C. :非アンカー要素内でホバーする
例
| div:ホバー { 色: #f00; } |
説明する
:hover 疑似クラスは、タグだけでなく、任意の要素のホバー状態に適用できます。
サポート状況
| IE6 いいえ IE7はい IE8はい |
D. :first-child 疑似クラス
例
| div li:first-child { 背景: 青; } |
説明する
疑似クラスを変更して、指定された各要素の親要素の最初の子要素を見つけます。
サポート状況
| IE6 いいえ IE7はい IE8はい |
バグ
IE7 では、配置される最初の子要素の前に HTML コメントがある場合、最初の子の擬似クラスは無効になります。
E. :focus 疑似クラス
例
| a:フォーカス{ 境界線: 1 ピクセルの赤一色。 } |
説明する
この疑似クラスは、キーボード フォーカスを持つすべての要素を見つけます。
サポート状況
| IE6 いいえ IE7いいえ IE8はい |
F. :before および :after 擬似クラス
例
| #box:前 { content: "このテキストはボックスの前にあります"; } #box:後{ content: "このテキストはボックスの後ろにあります"; } |
説明する
これら 2 つの擬似要素は、生成されたコンテンツを指定された要素の前後にそれぞれ追加し、content 属性とともに使用されます。
サポート状況
| IE6 いいえ IE7いいえ IE8はい |
3. 属性のサポート
A. 位置によって生成される実際のサイズ
例
| ＃箱 { 位置: 絶対; トップ: 0; 右: 100ピクセル。 左: 0; 下: 200ピクセル; 背景: 青; } |
説明する
絶対的に配置された要素の上、右、下、左の値を定義すると、幅と高さの値は設定されませんが、要素の実際のサイズ (幅と高さ) が与えられます。
サポート状況
| IE6いいえ IE7 はい IE8はい |
B. 最小高さと最小幅
例
| ＃箱 { 最小高さ: 500ピクセル; 最小幅: 300ピクセル; } |
説明する
これら 2 つのプロパティは要素の最小幅と高さをそれぞれ指定し、ボックスを指定された最小値より大きくすることはできますが、小さくすることはできません。これらは一緒に使用することも、別々に使用することもできます。
サポート状況
| IE6 いいえ IE7 はい IE8はい |
C. 最大高さと最大幅
例
| ＃箱 { 最大高さ: 500ピクセル; 最大幅: 300ピクセル; } |
説明する
これら 2 つのプロパティは、要素の最大の高さと幅をそれぞれ指定します。ボックスは、指定された最大値より小さくてもかまいませんが、それより大きくすることはできません。一緒に使用することも、個別に使用することもできます。
サポート状況
| IE6 いいえ IE7 はい IE8はい |