続いて、図8のような、日曜始まりのカレンダーを作成してみます。表示を赤文字でスタイリングしています。図8:日曜始まりのカレンダー:nth-child()擬似クラスを使うので、class="sun"やclass="sat"などといった記述を追記する必要はなく、HTMLコードはシンプルなままでOKです。th:nth-child(1)」というように指定できます。td:nth-child(7)」と指定できます。td:nth-child(2)」というように指定できます。最後に未対応ブラウザを、jQueryで補完しておきましょう。calender.jsのコードは次のようになります。複数のセレクタを指定する場合は、$("セレクタ1,セレクタ2")の要領で、半角コンマで区切ります。複数のプロパティを指定する場合は、.css("プロパティ1":"値1").css("プロパティ2":"値2")とつなげて記述します。"プロパティ2":"値2"})の書式でもかまいません。td:nth-child(2)").css({"color":"#ffffff"}).css({"background-color":"#ff0000"});});以上のように、:nth-child()擬似クラスを使用すれば、HTMLにスタイルのためのコードを追記する必要がなく、CSSだけでスタイルの適用先を細かく指定することができます。HTMLコードがすっきりするだけでなく、うまく利用すれば、ランキングアイコンのように視覚効果を高めたり、ゼブラテーブルのように視認性を高めたりすることができて便利です。活用してみてください。サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表:山田祥寛)。おもな活動は、Web開発分野の書籍/雑誌/Web記事の執筆。ほかに海外記事の翻訳、講演なども幅広く手がける。2011年3月時点での登録メンバは36名で、現在もプロジェクトメンバーを募集中。執筆に興味のある方は、どしどしご応募頂きたい。ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。VeloCloudが選ばれる理由SD-WANとはなにか。Linuxエンジニア育成への思いF5とNGINXの組み合わせで、サービス公開をよりセキュアに。ITがお届けするポッドキャストです。