擬似要素名称の直後に空白類文字を置かないと擬似要素が認識されない

症状

セレクタに :first-letter などの擬似要素を用いるとき、擬似要素名称の次(中括弧やカンマとの間)に空白類文字を置かないと擬似要素が認識されず、そのセレクタが無視されてしまう。

例示

<style type="text/css">
p.a:first-letter{
  color:red;
}
p.b:first-letter {
  color:red;
}
</style>

<p class="a">空白なし</p>
<p class="b">空白あり</p>

空白なし

空白あり

p要素内にある最初の文字を赤色で表示させる構文です。

スクリーンショット

Moz1.0Moz1.0での表示(標準モード)

WinIE6WinIE6.0での表示(標準モード)

補足

擬似要素を使う使わないに限らず、セレクタと左括弧の間には常に空白類文字を置くように心がけてください。セレクタのグループ内に擬似要素を含める場合は擬似要素名称とカンマの間にも空白類文字を置いてください。

h1:first-letter , h2:first-letter {
  ……
}

互換モードでは空白類文字を置かなくてもセレクタが機能します。

修正状況

WinIE6.0標準モードで不具合の発生が確認されました。

WinIE7では発生しません。

スポンサーリンク

関連記事

スポンサーリンク

SQLite Database browser

ホームページ製作・web系アプリ系の製作案件募集中です。

上に戻る