その1に続いて、IE7の個人的まとめ。今回はCSSのセレクタ周りの対応状況を確認してみます。その1でも紹介しましたが、CSS実装徹底検証! そこが知りたいInternet Explorer 7を参照すると、IE6と比べるとIE7のセレクタの対応は結構進んでいる事が分かります。IE7では、子供セレクタ、隣接セレクタ、属性セレクタ、:first-child疑似クラスが使えるようになっているようです。

各種セレクタや疑似要素、疑似クラスの機能は、ここでは取り上げないので、CSSのリファレンス等を参考にしてみてください。それぞれの簡単な使い方は次のような感じになります。

/* --- 子供セレクタ ---*/
/* div要素の中のp要素に適用 */
div > p { color: red }

/* --- 隣接セレクタ ---*/
/* h3要素に並んでいるp要素に適用 */
h3 + p { color: blue }

/* --- 属性セレクタ ---*/
/* rel属性のあるa要素に適用 */
a[rel] { font-weight: bold }
/* rel属性の値が "tag" のa要素に適用 */
a[rel="tag"] { color: green }
/* rel属性の値が "no-" で始まるa要素に適用 */
a[rel|="no"] { text-decoration: none }
/* title属性の値が "Mac " で始まるa要素に適用 */
a[title~="Mac"] { font-weight: bold  }

/* --- :first-child疑似クラス --- */
/* div要素の中の最初の要素に適用 */
div:first-child { font-size: 1.5em }

属性セレクタ等は便利に使えるセレクタなので、今回の対応は嬉しいところですが、まだまだ対応していないセレクタも多いです。中でも、::beforeや::afterといった便利な疑似要素に対応していないのは少し残念ですね。

セレクタの詳細な実装状況の検証はCSS Selectors testsuiteというページでチェックできますが、hxxk.jpのIE 7 正式版を含む各種ブラウザの CSS Selectors testsuite の検証結果のまとめという記事に各ブラウザの状況がまとめられているので、非常に分かりやすいです。

またまた長くなってしまったので、IE7に関するCSSハックのまとめはその3に続きます。