やりたいこと
以下の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もすっかりどこに書けばいいのか忘れておりました。
