CSSの適用先である要素の指定方法
セレクタは、要素の名前を指定する方法以外にも多くの指定方法があります。CSS2.1とCSS3で定義されているすべてのセレクタは巻末資料の「CSS2.1で定義されているセレクタ(p.331)」と「CSS3で定義されているセレクタ(p.332)」に一覧表で掲載してありますが、ここではその中でも使用頻度の高いセレクタの説明をします。
基本となる4つのセレクタ
指定例01は、もっとも基本的なセレクタの使い方で、要素の名前をそのまま指定する方法です。こうすると、適用先サンプルの①のh1要素の文字がグリーンになります。
指定例02は、適用先として*を指定しています。*は(body要素内の)すべての要素を適用先とする記号ですので、①②③④⑤⑥全部の文字がグリーンになります。このとき、body要素自身も適用対象となる点に注意してください。
指定例03は、id属性の値で適用先を指定する例です。#記号に続けてid属性の値を指定すると、id属性にその値が指定されている要素が適用対象となります。したがって、指定例03のように指定すると③のh2要素の文字がグリーンになります。
指定例04は、class属性の値で適用先を指定する例です。.記号に続けてclass属性の値を指定すると、class属性にその値が指定されている要素が適用対象となります(class属性に複数の値が指定されていても、その中のひとつに合致すれば適用されます)。したがって、指定例4のように指定すると④と⑥のp要素の文字がグリーンになります。
この記事は会員限定です。会員登録をすると続きをお読みいただけます。
ログイン / 新規登録