サイト制作に関するメモ書き

HOME > HTML・CSS > 疑似要素の:first-letterが2文字目にも適用される

疑似要素の:first-letterが2文字目にも適用される

:first-letterのスタイルが2文字目にも適用される不具合?に遭遇したのでメモしておきます。

サンプルコード

いくつかのパターンを作って試してみます。

HTML

<ol>
<!-- (01) --><li>ふつうのにほんご</li>
<!-- (02) --><li>「友情」「努力」「勝利」</li>
<!-- (03) --><li>◆先頭に記号付きの場合</li>
<!-- (04) --><li>◆「友情」「努力」「勝利」</li>
<!-- (05) --><li>◆◆◆◆◆</li>
<!-- (06) --><li>◆◆◆◆◆記号が複数個</li>
<!-- (07) --><li>①先頭に丸数字付きの場合</li>
<!-- (08) --><li>①「友情」「努力」「勝利」</li>
<!-- (09) --><li>①②③④⑤</li>
<!-- (10) --><li>①②③④⑤丸数字が複数個</li>
<!-- (11) --><li>※先頭に米印付きの場合</li>
<!-- (12) --><li>※「友情」「努力」「勝利」</li>
<!-- (13) --><li>※※※※※</li>
<!-- (14) --><li>※※※※※米印が複数個</li>
<!-- (15) --><li>「「「「「」」」」」</li>
<!-- (16) --><li>「「「「「友情・努力・勝利」」」」」</li>
<!-- (17) --><li>"友情"・"努力"・"勝利"</li>
<!-- (18) --><li>"""""友情・努力・勝利"""""</li>
</ol>

CSS

li:first-letter {
	color: red;
}

:first-letterのデモページ

Windowsの各ブラウザで、先頭から何文字目まで色が変更されているかを確認した結果が以下の通りです。

chrome Firefox IE11 edge
01 1文字 1文字 1文字 1文字
02 2文字 2文字 2文字 2文字
03 1文字 0文字 1文字 1文字
04 2文字 0文字 2文字 2文字
05 1文字 0文字 1文字 1文字
06 1文字 0文字 1文字 1文字
07 1文字 1文字 1文字 1文字
08 2文字 2文字 2文字 2文字
09 1文字 1文字 1文字 1文字
10 1文字 1文字 1文字 1文字
11 2文字 2文字 2文字 2文字
12 3文字 3文字 3文字 3文字
13 0文字 5文字 5文字 5文字
14 6文字 6文字 6文字 6文字
15 0文字 10文字 10文字 10文字
16 6文字 6文字 6文字 6文字
17 2文字 2文字 2文字 2文字
18 6文字 6文字 6文字 6文字

IE11とedgeは調べた範囲では挙動は同じでしたが、それ以外はブラウザによって差がありました。
先頭のテキストが記号の場合に発生することがあるようですが、記号によっても挙動が異なる場合があるようです。

ググって調べてみると、以下のような記述がありました。

先頭文字に記号(UNICODEでPunctuationとして分類される文字)を使った場合、
:first-letterの設定が2文字目まで適応されるのは仕様です。
引用 – 人力検索はてな

仕様らしいです。

CMSなどでクライアントが入力したりする場合など、先頭に記号を入れることは割とありそうなので注意が必要そうです。
 

【参考サイト】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP