詳解逆引きHTML+CSS辞典

HTMLとCSSの基礎知識 - CSSの適用先である要素の指定方法

登録タグ
Icon comment count 0
Icon stock count 3

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要素の文字がグリーンになります。

基本となる4つのセレクタの指定例
<

出典情報

Medium

詳解逆引きHTML+CSS辞典

  • 著者: 大藤 幹

コメント

    コメントはありません