質問: css3のtd:nth-childの扱いでお助けください。 奇数列、偶数列をそれぞれ設定しているのですが、 中間1列(↓列3)を個別設定、次の列から奇数列として扱いたいです。 どのようにすれば良いでしょうか? | 1 | 2 | 3 | 4 | 5 | | --- | --- | --- | --- | --- | | | | | | | ``` td:nth-child(odd) { width:17px; } td:nth-child(even) { width:100px; } td:nth-child(3) { width:30px; } ``` 補足:1,3,4を奇数、2,5を偶数として扱いたいです。 質問への追記・修正の依頼 kei344 2017/03/09 19:05 2のみ偶数、1,4,5を奇数列として扱うということですか? karashi 2017/03/13 09:59 返信が遅くなりすみません。2,5を偶数、1,3,4を奇数にしたいです。 kei344 2017/03/13 11:14 列数は5以上になる可能性はありますか?その場合どのようになりますか? karashi 2017/03/13 11:43 列数は最大13列です。その場合は1,3,5,7,8,10,12を奇数、2,4,6,9,11,13を偶数にしたいです。 kei344 2017/03/13 11:45 中央から前と後で変えるという事ですね、偶数列の場合は? karashi 2017/03/13 11:53 その通りです。ですので、今のところ偶数列での作成は想定していないです。 kei344 2017/03/13 11:58 HTMLの変更(classの付与)については可能でしょうか。 karashi 2017/03/13 12:01 もちろんです。 kei344 2017/03/13 12:06 わかりました、回答ありがとうございます。 ちなみに、ここでのやり取りはteratailの構造上「クリックしないと見られない」ので、質問文に追記しておいてください。 よろしくお願いします。
回答: とりあえずわかりやすく色分けで。 ``` th { text-align: center; width: 1em; } table th.center { background-color: #5aa; } th:nth-child(odd), th.center ~ th:nth-child(even) { background-color: #aa5; } th:nth-child(even), th.center ~ th:nth-child(odd) { background-color: #a5a; } ``` **動くサンプル:** 【意外と知らない!?CSSセレクタ20個のおさらい|Webpark】 【【CSS】CSSのセレクタとは? 覚えておきたいセレクタ21選】