css - 「xとyの間」の適切なcssセレクターは何ですか?

Question

20 行 3 列の HTML テーブルがあるとします。(20x3)

7 から 12 までの行を赤く塗りたいと思います。

それに適したCSSセレクターは何ですか? 「間」をどのように定義できますか？

Answer 1

CSS 2.1 セレクターを使用してこれを行う方法があります。これは少し面倒ですが、簡単に理解できます。そう：

/* First set of colours, from 1 - 6 */
table tr td { background-color: #00f; }

/* From the 7th row onwards, different colour */
table tr + tr + tr + tr + tr + tr + tr td { background-color: #f00; }

/* From the 13th row onwards, change it back to the first colour */
table tr + tr + tr + tr + tr + tr + tr + tr + tr + tr + tr + tr + tr td { background-color: #00f; }

作業例: http://jsfiddle.net/pY3wS/

私が CSS 3 セレクターよりも 2.1 セレクターを使用する理由はnth-child、古いブラウザー、特に IE 8 のサポートが優れているためです。