読者です 読者をやめる 読者になる 読者になる

IE7スターハック(*:first-child+html)が効かない場合の確認点

css

IE7でのみcssをちょっと変えたい場合に用いられるハックの一つとして、
「*:first-child+html」があります。
これはIE7スターハックと呼ばれているようです。
IE 6とIE 7のためのCSSハック16選(3/3)- @IT

しかしこれが効かないケースがあってアレコレとハマったのでメモしておきます。

正常に動くサンプル

まずは正常に動くサンプルです。
以下のファイルをsample.htmlとでもして保存しブラウザで開いてみます。
IE7以外では前半のスタイルが効いて(後半は無視され)緑文字でTestと表示され、
IE7で見ると後半のスタイルが効くため上書きされて赤文字でTestと出ます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <style type="text/css">
    #target{
      color: green;
    }

    *:first-child+html #target{
      color: red;
    }
    </style>
  </head>
  <body>
    <span id="target">Test</span>
  </body>
</html>

動かないケース

対象要素の前にコメントが入っている

コレが今回ハマったところ。
上記例で言えばfirst-child+htmlとしているので、htmlタグの前にコメントがあるとアウトです。
つまりこんな感じのソースがダメ。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- IE7スターハックを効かなくしてやろうか! -->
<html>
  <head>
    <style type="text/css">
    #target{
      color: green;
    }

    *:first-child+html #target{
      color: red;
    }
    </style>
  </head>
  <body>
    <span id="target">Test</span>
  </body>
</html>

こちらが大変参考になりました。ありがとうございます。
XHTMLのコメントもセレクタ対象?(:first-childが効かない-IE7-) - Probationer M's Labo

しかもこの問題はIE5.5のときからあるバグだそうです。IE7がいろんなセレクタに対応したために発覚したバグだそうです。

あと今回は大丈夫だったけど、注意しないといけない点を2つ。

DOCTYPEが宣言されていない

上記サンプルからDOCTYPE宣言を消すとIE7でも緑文字になります。

DOCTYPEにて後方互換モードが宣言されている

これは試さなかったんですが、後方互換モードでもダメそう。
うのらぼ。 - 【HTML】IE7標準準拠とか後方互換とかIE8とか

結論

IE対応の苦労はやった人しか分からない。偉い人にはそれが分からんのですよ…。