前回の[WordPress CSS]WordPressのカレンダーウィジェットを可愛くする（おじさんが）の続きです。
前回でWordPressのカレンダーウィジェットの見た目は微妙に可愛くなりましたが、まだ足りません。
ということでnth-child擬似クラスを使って土曜日と日曜日のスタイルを変更してみます。
WordPressが気を利かせてclassとか付けておいていただければ有難いのですが、残念ながらなのでCSSでやっちゃいましょう。
前回からの変更点
- 曜日が表記されているthの土曜日、日曜日を背景色と文字色を変更
- 土曜日、日曜日に該当するtdの背景色を変更
この2点です。
nth-child(n)擬似クラスについて
例えば
- リスト1
- リスト2
- リスト3
- リスト4
- リスト5
- リスト6
というhtmlがあったとします。
これの「リスト2」だけスタイルを変更したい(文字色を変更したり)と思ったら
- リスト1
- リスト2
- リスト3
- リスト4
- リスト5
- リスト6
とかクラスを追加してスタイルを追加したりします。
しかしnth-child(n)擬似クラスを使えばクラスを追加することなくスタイルの変更が可能です。
ul li:nth-child(2) {color:red;}としてあげると「リスト2」だけが赤文字になります。
つまりn番目だけスタイルを適用という使い方です。
または偶数番目だけの「even」「2n」や奇数番目だけの「odd」「2n+1」があります。
偶数番目だけ赤文字
ul li:nth-child(even) {color:red;}
ul li:nth-child(2n) {color:red;}
奇数番目だけ赤文字
ul li:nth-child(odd) {color:red;}
ul li:nth-child(2n+1) {color:red;}これを利用してWordPressのカレンダーウィジェットの土曜日と日曜日だけスタイルを付けようということです。
前回の[WordPress CSS]WordPressのカレンダーウィジェットを可愛くする（おじさんが）のCSSに以下のCSSを追加すればOKです。
table#wp-calendar th:nth-child(7) {background:#f03; color:#fff;}
table#wp-calendar th:nth-child(6) {background:#ff0080; color:#fff;}
table#wp-calendar td:nth-child(7) {background:#ffeaea; color:#f03;}
table#wp-calendar td:nth-child(6) {background:#fff4fa; color:#ff0080;}気になるIEの対応は？
IE9以上ですね・・・
まとめ
CSSをどう書くかってなかなか迷いますね。
後々のメンテナンスのことを考えれば擬似クラスは便利ですが、やはり環境依存は良くないのでIEの対応はしきゃなだな。と。
