jQuery UIのDatepickerで、土曜日と日曜日の色だけ変更する

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

こちらのブログで紹介されていたのですが、「:last-child」疑似クラスは、IE9以上でないと認識しない。

2013年8月現在でIE8を切り捨てることはできないので、この方法では本来の意味で実現できたことにはならないので、IE7以上でも使えるように、「:first-child」疑似クラスのみを使った、Datepickerの土日のみの色の変更の仕方をご紹介します。

とはいっても、単純なものです。

土日には「ui-datepicker-week-end」クラスが付与されているので、そのクラスを土曜日の色として指定して、日曜日の色は、「:first-child」疑似クラスで上書きしてやるだけです。

最初に、見出し行であるthに「ui-datepicker-week-end」クラスの付いたすべてを青文字色にして、
次にその最初(first-child)だけ赤にします。

同じ要領で、データ行であるtdの背景色を薄い青にして、最初だけを薄い赤にします。

これでlast-childは使わずに、first-childだけで土曜と日曜の色を変更できます。

first-childであれば、IE7から使える疑似クラスなので、IE対策もある程度バッチリです。

 

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。




コメントを残す

%d人のブロガーが「いいね」をつけました。