CSS3では、CSSの「セレクタ」の書き方（仕様）も拡張されている
CSSを記述する基本は、
セレクタ { プロパティ: 値; }
です(※)。「セレクタ」は、スタイルの適用対象を指定するために記述します。CSSの基本中の基本であるところの「セレクタ」ですが、この仕様もCSS3で拡張されており、新しく便利な書き方ができるようになっています。また、（従来から仕様上は存在していても）対応ブラウザの問題で使うのを諦めていたために、存在を忘れてしまっている書き方もあるかもしれません。
本記事では、イチから「セレクタ」の書き方をご紹介致します。この機会に、セレクタの書き方を見直してみてはいかがでしょうか。今まで、HTMLに細かくクラス名を付加して実現していた「適用先の限定」方法が、「実はこんなに楽に記述できるのか」と思うこともあるかもしれません。
※セミコロン「;」記号は、「プロパティと値」のセットを複数記述する際の区切り文字として使います。ですから、「プロパティと値」を1セットしか書かないのなら、セミコロンはなくても構いません。ただ、後からスタイルを追記する際に書き忘れないよう、最初からセミコロンを書いておくことをお勧め致します。本記事のサンプルでは、すべてセミコロンを付けています。
セレクタの書き方の基本
以下の4種類は、シンプルに記述できる最も基本的なセレクタです。■ユニバーサルセレクタ：（全要素に適用）
* { プロパティ: 値; }
代表的なブラウザでは、h1要素やp要素などに、最初からマージン（余白）が付加されて表示されます。それらを一括してなくす目的で、以下のようにユニバーサルセレクタが使えます。* { margin: 0px; }
上記のように記述すると、あらゆる要素のマージンがゼロになります。■タイプセレクタ：（指定の要素だけに適用）
要素名 { プロパティ: 値; }
以下のように記述すると、h1要素に限定して、文字色が緑色になります。h1 { color: green; }
■クラスセレクタ：（指定のクラスだけに適用）
.クラス名 { プロパティ: 値; }
以下のように記述すると、appleクラスが付加された要素に限定して、文字色が赤色になります。.apple { color: red; }
■IDセレクタ：（指定のIDだけに適用）
#ID名 { プロパティ: 値; }
以下のように記述すると、IDが「grape」の要素に限定して、文字色が紫色になります。#grape { color: purple; }
※クラスセレクタやIDセレクタは、タイプセレクタと合わせて以下のようにも記述できます。例えば、下記のように記述すると、class名が「melon」であるstrong要素だけに適用されます。
strong.melon { プロパティ: 値; }
さて、CSSの「セレクタ」の書き方は、上記の4種類だけではありません。もっと多くの書き方が用意されていて、スタイルの適用対象を絞り込みやすくなっています。
子孫関係や隣接関係で適用対象を絞るセレクタの書き方
例えば、「p要素の内側に含まれるa要素」だけを適用対象にしたい場合は、以下のように要素名を半角スペースで繋げて記述します。この書き方は、かなり頻繁に利用されているでしょう。p a { プロパティ: 値; }
この場合は、「p要素の内側にある『すべてのa要素』」が適用対象になります。しかし、もっと条件を限定して、
- p要素の直接の子要素になっているa要素だけを対象にする
- p要素に隣接しているa要素だけを対象にする
- p要素よりも後に登場するa要素だけを対象にする
属性や属性値の内容で適用対象を絞るセレクタの書き方
HTMLの各要素には、属性と属性値が付加されていることがあります。例えば、リンクを作るa要素では、以下のように（リンク先URLを指定する）href属性や、（表示先ウインドウを指定する）target属性などを記述できます。<a href="http://allabout.co.jp/" target="_blank">All About</a>このようなリンク（a要素）に対して、1つ1つにクラス名やID名を割り振らなくても、セレクタの書き方次第で、
- target属性のあるa要素だけを対象に装飾
- target属性の値が「_blank」になっているa要素だけを対象に装飾
- href属性の値が「http://」で始まっているa要素だけを対象に装飾
- href属性の値が「.pdf」で終わっているa要素だけを対象に装飾
- href属性の値に「allabout.co.jp」を含んでいるa要素だけを対象に装飾
このようなセレクタの書き方を、「属性セレクタ」と呼びます。もちろんa要素に限らず、どんな要素に対しても使えます。詳しくは3ページ目以降でご紹介致します。
class属性・id属性を駆使しなくても、CSS側だけで適用先の絞り込みができる
このように、CSSのセレクタには様々な条件の絞り込みができる仕様が用意されています。これらの書き方を活用すれば、HTMLソース側にclass属性やid属性を使って名前を割り振らなくても、CSSソース側だけで柔軟に装飾の適用先を指定できます。それでは、それらの方法について、次のページから詳しく見ていきましょう。
