[WordPress CSS]nth-child(n)擬似クラスでWordPressのカレンダーの土曜日、日曜日のスタイルを変更する

前回の[WordPress CSS]WordPressのカレンダーウィジェットを可愛くする(おじさんが)の続きです。

前回でWordPressのカレンダーウィジェットの見た目は微妙に可愛くなりましたが、まだ足りません。
ということでnth-child擬似クラスを使って土曜日と日曜日のスタイルを変更してみます。

WordPressが気を利かせてclassとか付けておいていただければ有難いのですが、残念ながらなのでCSSでやっちゃいましょう。

前回からの変更点

  1. 曜日が表記されているthの土曜日、日曜日を背景色と文字色を変更
  2. 土曜日、日曜日に該当するtdの背景色を変更

この2点です。

とりあえずデモはこんな感じです。

nth-child(n)擬似クラスについて

例えば

というhtmlがあったとします。
これの「リスト2」だけスタイルを変更したい(文字色を変更したり)と思ったら

とかクラスを追加してスタイルを追加したりします。
しかしnth-child(n)擬似クラスを使えばクラスを追加することなくスタイルの変更が可能です。

としてあげると「リスト2」だけが赤文字になります。

つまりn番目だけスタイルを適用という使い方です。

または偶数番目だけの「even」「2n」や奇数番目だけの「odd」「2n+1」があります。

これを利用してWordPressのカレンダーウィジェットの土曜日と日曜日だけスタイルを付けようということです。
前回の[WordPress CSS]WordPressのカレンダーウィジェットを可愛くする(おじさんが)のCSSに以下のCSSを追加すればOKです。

気になるIEの対応は?

IE9以上ですね・・・

まとめ

CSSをどう書くかってなかなか迷いますね。
後々のメンテナンスのことを考えれば擬似クラスは便利ですが、やはり環境依存は良くないのでIEの対応はしきゃなだな。と。

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク