cssのセレクタ

スポンサーリンク

初めて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>

昔書いたのが、ちょっとありえないですよね…
cssをもっとちゃんと理解するために、Amazonで下記を注文しました。

セオリー・オブ・スタイルシート
技術評論社編集部
技術評論社 (2006/05/19)
売り上げランキング: 88648
おすすめ度の平均: 5.0
5 表示できたらいいじゃんではこれからは通用しない。本物を目指すために
5 名書ユニバーサルHTML/XHTMLスタイルシート版。
5 名書、「ユニバーサルHTML/XHTML」のスタイルシート