CSS のセレクタ


スポンサーリンク

CSSのセレクタがわかれば、CSSは、怖くない。

CSS の優先度

同じ要素があった場合
– 後から書いた方が優先される。
– インラインで書いた方が優先される。
– 詳細度の高い方が優先される。
– !important が優先される。
 

タグ要素とクラスとID

タグ要素・・・ h1 , h2 , p
クラス・・・・ class=”xxxx”
ID・・・・・ id=”xxxx”
クラスは、 . で表す。
IDは、 # で表す。
.classname { ・・・ } /* クラス */
#idname { ・・・ } /* ID */
※クラスとIDの違い。
同じ。だけど、IDは、ページ内に1つのみ記載できる。
したがって同じページに ID=”a” は2つ存在できない。
// これはない
    <div id="a">・・・</div>
       :
    <div id="a">・・・</div>

// これが正解
    <div id="a">・・・</div>
       :
    <div id="b">・・・</div>
 

すべてを対象とする。

[box color=”lblue”] アスタリスク
* { ・・・ } [/box]  

指定したものを対象とする。

[box color=”lblue”] カンマで区切る。
a,b { ・・・ } [/box]  

下階層の特定のものを対象とする

前から順に指定する。どこのなにのどれを・・・こうしろ。 [box color=”lblue”] スペースで区切る。
section .back { ・・・ } [/box]
<body>
    <section>
      <h1>見出し</h1>
    </section>
    <section>
      <h2>見出し</h2>
      <p class="back">それぞれの秋</p>
      <ul>
        <li>項目1<li>
        <li>項目2<li>
        <li class="back">項目3</li>
      </ul>
    </section>
</body>
 

指定項目の階層の直下の物を対象にする。

これの直下のこれ。 [box color=”lblue”] > で区切る。
section > .back { ・・・ } [/box]
<body>
    <section>
      <h1>見出し</h1>
    </section>
    <section>
      <h2>見出し</h2>
      <p class="back">それぞれの秋</p>
      <ul>
        <li>項目1<li>
        <li>項目2<li>
        <li class="back">項目3</li>
      </ul>
    </section>
</body>
 

指定項目の直後の物を対象にする。

[box color=”lblue”] +で区切る。
h2 + p ・・・ h2 項目の直後の p が対象。 [/box]
<body>
    <section>
      <h1>見出し</h1>
    </section>
    <section>
      <h2>見出し</h2>
      <p class="back">それぞれの秋</p>
      <ul>
        <li>項目1<li>
        <li>項目2<li>
        <li class="back">項目3</li>
      </ul>
    </section>
    <section>
      <h2>見出し</h2>
      <p class="back">それぞれの秋</p>
      <p class="back">それぞれの冬</p>
    </section>
</body>
 

かつ結合

~でかつ~ [box color=”lblue”] つなげる。 p.back { ・・・ } [/box]
<body>
    <section>
      <h1>見出し</h1>
    </section>
    <section>
      <h2>見出し</h2>
      <p class="back">それぞれの秋</p>
      <ul>
        <li class="back">項目1<li>
        <li>項目2<li>
        <li class="back">項目3</li>
      </ul>
    </section>
    <section>
      <h2 class="back">見出し</h2>
      <p class="back">それぞれの秋</p>
      <p class="back">それぞれの冬</p>
    </section>
</body>

スポンサーリンク