cssのセレクタ - Enjoy*Study

初めてcssを使い始めたときは、デザインを変えたい場合に、なんでもclassを付与しときゃ良いような感じで、cssのセレクタについての理解が足りませんでした。
(その時は、要素、class、id、アンカーの擬似クラスくらいしか知らなかった)

時は流れて、他のセレクタを知って、今ではclassやidをHTMLに書く量が減ったような気がします。
といっても、、よく使うのは子孫セレクタで、これくらいは最初から知っておくべきでした。。
(他にも便利なセレクタありますが、クロスブラウザで対応できないので使えなかったり。。IE6はダメすぎ！)

例えば、テーブルの1行を背景色変える際に、昔は下記のように書いてました。
(今見るとかなり恥ずかしい…)

.color {
  background-color: #FFFF66;
}

<table>
  <tbody>
    <tr>
      <td>1</td><td>1</td><td>1</td>
    </tr>
    <!-- この行の色変える -->
    <tr>
      <td class="color">2</td><td class="color">2</td><td class="color">2</td>
    </tr>
  </tbody>
</table>

今だったら、下記のような感じで。

tr.color td {
  background-color: #FFFF66;
}

<table>
  <tbody>
    <tr>
      <td>1</td><td>1</td><td>1</td>
    </tr>
    <!-- この行の色変える -->
    <tr class="color">
      <td>2</td><td>2</td><td>2</td>
    </tr>
  </tbody>
</table>