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

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

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

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

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

th.ui-datepicker-week-end {
	color: #00f;
}
th.ui-datepicker-week-end:first-child {
	color: #f00;
}
td.ui-datepicker-week-end {
	background-color: #ccf;
}
td.ui-datepicker-week-end:first-child {
	background-color: #fcc;
}

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

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

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

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