セレクタの組み合わせ

セレクタの組み合わせの一例です。
ユニバーサルセレクタ
ユニバーサルセレクタ(*)は全ての要素が対象です。
classセレクタやidセレクタと併用も可能です。
*.値{
    color:#000;
    }
*#値{
    color:#000;
    }
表示確認用サンプル
子孫セレクタ
親要素に含まれる全ての子孫要素が対象で、子孫セレクタ(descendant selector)と言う。
セレクタとセレクタを半角スペース区切りで指定します。
親要素 子孫要素{
    プロパティ:値;
    }
blockquote p{
    color:#000;
    }
表示確認用サンプル
複数のclass属性の値を対象にする
セレクタのグループ化と同じ。
例えば
<p class="top">と
<div class="footer">の場合
.値,.値{
    プロパティ:値;
    }
.top .footer{
    color:#000;
    }
表示確認用サンプル
複数のid属性の値を対象にする
セレクタのグループ化と同じ。
例えば
<p id="top">と
<div id="footer">の場合
#値,#値{
    プロパティ:値;
    }
.top .footer{
    color:#000;
    }
表示確認用サンプル


TOPへ おタグるーむ