セレクタ * # . EF >

*

全ての要素に反映
    * {
        color: #FFD700;
    }

    div * {
        color: #FFD700;
    }

#

指定のid名に反映
    #test {
        color: #FFD700;
    }
    <div id="test">classは複数、idはユニーク</div>

.class_name

指定のクラス名に反映
    .test {
        color: #FFD700;
    }
    <p class="test">ゴールド</p>

tag.class_name

指定したタグのクラス名に反映
    div.test {
        color: #FFD700;
    }
    <div class="test">ゴールド</div>

子孫セレクタ(EF)

親の子孫すべてに反映

EはElement FはEの次だから子孫要素ということです。

    div #main p {
        color: #FFD700;
    }
    <div id="main">
        <p>ゴールド</p>
    </div>
    <p>ゴールドではない</p>

子供セレクタ(E > F)

直下の子要素に反映
    div#main > strong {
        color: #FFD700;
    }
    <div id="main">
        <strong>反映</strong>
        <div>
            <strong>反映されない</strong>
        </div>
    </div>

隣接セレクタ(E + F)

隣の要素のみ反映
    p pre {
        color: #FFD700;
    }
    <p>この下の要素の</p>
    <pre>ここに反映され</pre>
    <pre>ここには反映されません</pre>

E ~ F

指定した要素から反映
    p ~ pre {
        color: #FFD700;
    }
    <pre>ここには反映されず</pre>
    <p>この要素の下の</p>
    <pre>ここに反映されます</pre>


つまり、空欄は子孫すべてに、不等号>は子だけに、カンマ,はすべてに、プラス+は隣の要素のみに適用されます。



Classic

Classic

  • MKTO
  • Pop
  • ¥200