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