CSS - nth-child()疑似クラス

nth-child()疑似クラスのテストです。
Tried at 2008-05-26

まず，マークアップは次の通り

<table class="calendar">
  <caption>7月</caption>
  <tr>
    <th>月</th>
    <th>火</th>
    <th>水</th>
    <th>木</th>
    <th>金</th>
    <th>土</th>
    <th>日</th>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>10</td>
    <td>11</td>
    <td>12</td>
    <td>13</td>
  </tr>
  <tr>
    <td>14</td>
    <td>15</td>
    <td>16</td>
    <td>17</td>
    <td>18</td>
    <td>19</td>
    <td>20</td>
  </tr>
  <tr>
    <td>21</td>
    <td>22</td>
    <td>23</td>
    <td>24</td>
    <td>25</td>
    <td>26</td>
    <td>27</td>
  </tr>
  <tr>
    <td>28</td>
    <td>29</td>
    <td>30</td>
    <td>31</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

土・日・祝日に色を

7月
月 火 水 木 金 土 日
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31       
table.calendar tr th:nth-child(6) {
	background: #99F;
}

table.calendar tr th:nth-child(7) {
	background: #F99;
}

table.calendar tr td:nth-child(6) {
  color: #009;
}

table.calendar tr td:nth-child(7),
table.calendar tr:nth-child(5) td:nth-child(1) {
  color: #900;
}

休業日に背景色を

7月
月 火 水 木 金 土 日
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31       
table.calendar tr td:nth-child(7),
table.calendar tr:nth-child(2n+1) td:nth-child(4) {
	background: #FCC;
}

table.calendar tr:nth-child(2) td:nth-child(1),
table.calendar tr:nth-child(6) td:nth-child(5),
table.calendar tr:nth-child(6) td:nth-child(6),
table.calendar tr:nth-child(6) td:nth-child(7) {
  background: #FFF;
}

まず，マークアップは次の通り

<ul class="product-list">
  <li><a href="#"><img src="figure/dummy-100.gif" alt="ダミー" width="100" height="100" /><br />
    <em>商品名</em></a><br />
    <span class="price">価格 0,000円</span></li>
  <li><a href="#"><img src="figure/dummy-100.gif" alt="ダミー" width="100" height="100" /><br />
    <em>商品名</em></a><br />
    <span class="price">価格 0,000円</span><br />
    ただいま20%OFF</li>
  <li><a href="#"><img src="figure/dummy-100.gif" alt="ダミー" width="100" height="100" /><br />
    <em>商品名</em></a><br />
    <span class="price">価格 0,000円</span></li>
  <li><a href="#"><img src="figure/dummy-100.gif" alt="ダミー" width="100" height="100" /><br />
    <em>商品名</em></a><br />
    <span class="price">価格 0,000円</span></li>
  <li><a href="#"><img src="figure/dummy-100.gif" alt="ダミー" width="100" height="100" /><br />
    <em>商品名</em></a><br />
    <span class="price">価格 0,000円</span></li>
  <li><a href="#"><img src="figure/dummy-100.gif" alt="ダミー" width="100" height="100" /><br />
    <em>商品名</em></a><br />
    <span class="price">価格 0,000円</span><br />
    ただいま20%OFF</li>
  <li><a href="#"><img src="figure/dummy-100.gif" alt="ダミー" width="100" height="100" /><br />
    <em>商品名</em></a><br />
    <span class="price">価格 0,000円</span></li>
  <li><a href="#"><img src="figure/dummy-100.gif" alt="ダミー" width="100" height="100" /><br />
    <em>商品名</em></a><br />
    <span class="price">価格 0,000円</span></li>
  <li><a href="#"><img src="figure/dummy-100.gif" alt="ダミー" width="100" height="100" /><br />
    <em>商品名</em></a><br />
    <span class="price">価格 0,000円</span></li>
  <li><a href="#"><img src="figure/dummy-100.gif" alt="ダミー" width="100" height="100" /><br />
    <em>商品名</em></a><br />
    <span class="price">価格 0,000円</span><br />
    ただいま20%OFF</li>
  <li><a href="#"><img src="figure/dummy-100.gif" alt="ダミー" width="100" height="100" /><br />
    <em>商品名</em></a><br />
    <span class="price">価格 0,000円</span></li>
  <li><a href="#"><img src="figure/dummy-100.gif" alt="ダミー" width="100" height="100" /><br />
    <em>商品名</em></a><br />
    <span class="price">価格 0,000円</span></li>
</ul>

floatを4つおきにclear

ul.product-list {
  overflow: hidden;
  width: 430px;
  border-top: solid 3px #666;
}

ul.product-list li {
  float: left;
  margin-top: 15px;
  margin-left: 10px;
  width: 100px;
}

ul.product-list li:nth-child(4n+1) {
  clear: left;
  margin-left: 0;
}

floatを3つおきにclear

ul.product-list {
  overflow: hidden;
  width: 320px;
  border-top: solid 3px #666;
}

ul.product-list li {
  float: left;
  margin-top: 15px;
  margin-left: 10px;
  width: 100px;
}

ul.product-list li:nth-child(3n+1) {
  clear: left;
  margin-left: 0;
}
  • width: 430px; を 320px に，li:nth-child(4n+1) を 3n+1 に書き換えるだけ。XHTMLの変更なし。