CSSでfirst-child + クラスによって表示する文字を追加 & 変更したい!

やりたいこと

以下のhtmlがあったとする。

<ul>
<li class = "day">test1</li>
<li class = "day">test2</li>
</ul>

クラス名は取得する時間によってJavascriptから受け取る値が変動し、dayクラスのときは「こんにちは」、nightクラスの時は「こんばんは」とfirst-childの<li>タグ内にCSSを使って表示させたい。

<ul>
<p>Hello</p>
<li class = "day">
<p>こんにちは<p>
test1</li>
<li class = "day">test2</li>
</ul>

上記のようになることを目標に書きます。

やってみる

cssのcontentを使って文字を追加しました。表示するための<p>タグはあらかじめHTML内に追加しておくことにしました(やや不満)。あとはcssを頑張ってセレクトできる位置まで持ってくるのみです。

See the Pen css select and add text test by Nakamoto (@programmerlife) on CodePen.

CSSを抜粋

ul li.day:first-child p:before{
content:"こんにちは";
}
ul li.night:first-child p:before{
content:"こんばんは";
}

あらかじめdayクラスとnightクラスのcssを用意しておくことで、クラス名が変わっても表示を切り替えることができました。

おわり

久しぶりにCSSを触っているといろいろ忘れており、昔は得意だったfirst-childもすっかりどこに書けばいいのか忘れておりました。

HTML / CSS

Posted by Nakamoto