QA@IT

CSS+HTML:RowSpanで連結したTableのRowを交互に色付けしたい

10439 PV

リンク先のようなHTMLの表があり、
http://jsfiddle.net/24h2oa4s/3/embedded/result/
CSSにより、各行を交互に色付けをしています。
コード: http://jsfiddle.net/24h2oa4s/3/

.da-table-table tbody tr:nth-child(2n-1) th,
.da-table-table tbody tr:nth-child(2n-1) td {
    background-color: #eaeef4;
}
.da-table-table tbody tr:nth-child(2n) th,
.da-table-table tbody tr:nth-child(2n) td {
    background-color: #fff;

単純な奇数行/偶数行で色付けするCSSだと、行連結した場合の連結先頭行の色になってしまい、交互にならない場合があります。これをCSSだけで交互にできないでしょうか?
(jQueryを使ったり、HTML側の<td>要素に指定したりすれば実現できるのですが、可能であればCSSで実現したいです。)

回答

  • 行連結してるかどうかは<th>要素や<td>要素で決まる。
  • 偶数行か奇数行かは、両要素の親である<tr>要素で決まる

この2つを基準に背景色をを付ける必要があるけど、どうしても「子から親」もしくは「親から子」への参照が必要で、それを実現できるセレクターがCSS3にはなさそうです。

CSS4には:has()という疑似クラスがあり、これが使えればまだやりようがありそうなのですが。

現実的には最初からclass属性を付けておくのがベストですかね。

ということでこの自己回答でクローズします。

編集 履歴 (0)
ウォッチ

この質問への回答やコメントをメールでお知らせします。