cssの:first-letterが効かなかったので原因を調べた

最初の文字に擬似要素で装飾が施せる「:first-letter」。

段落の一文字目だけ文字を大きくしたり、タイトルの一文字目だけ背景色を変えたりするときに便利なcssセレクタのひとつだ。

今日、このfirst-letterを使おうとしたら、何故か効かなかった。

原因はとっても単純で同じ要素にbefore:を使っていたから。

ちなみにこんな風にして使っていた。

【HTML】

<p class="classA classB">テキスト</p>

【css】

.classA:first-letter{

    color="red";

}

.classB:before{

    content="";

    background:url();

    ....

}

違うクラスでそれぞれ指定しているのにかかわらず、このbeforeが同じ要素にあると、beforeのcontent内を1文字目として認識される。

しかも、classBの記述が後にも関わらず。

もし、

.classB:before{

    content="あいうえお";

    background:url();

    ....

}

であれば、「あいうえお」の「あ」のみが赤くなる。

自分は、content=""と空にしていたので、これに気づくのに小一時間嵌ってしまった。

似たようなことでつまずいている人の助けになれば。