CSS のセレクタ
CSSのセレクタがわかれば、CSSは、怖くない。
– 後から書いた方が優先される。
– インラインで書いた方が優先される。
– 詳細度の高い方が優先される。
– !important が優先される。
クラス・・・・ class=”xxxx”
ＩＤ・・・・・ id=”xxxx”
クラスは、 . で表す。
ＩＤは、 # で表す。
同じ。だけど、ＩＤは、ページ内に１つのみ記載できる。
したがって同じページに ID=”a” は２つ存在できない。
// これはない <div id="a">・・・</div> ： <div id="a">・・・</div> // これが正解 <div id="a">・・・</div> ： <div id="b">・・・</div> ?>
* { ・・・ } [/box]
a,b { ・・・ } [/box]
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> ?>
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> ?>
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> ?>
CSS の優先度
同じ要素があった場合– 後から書いた方が優先される。
– インラインで書いた方が優先される。
– 詳細度の高い方が優先される。
– !important が優先される。
タグ要素とクラスとID
タグ要素・・・ h1 , h2 , pクラス・・・・ class=”xxxx”
ＩＤ・・・・・ id=”xxxx”
クラスは、 . で表す。
ＩＤは、 # で表す。
.classname { ・・・ } /* クラス */
#idname { ・・・ } /* ＩＤ */
※クラスとＩＤの違い。同じ。だけど、ＩＤは、ページ内に１つのみ記載できる。
したがって同じページに ID=”a” は２つ存在できない。
// これはない <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> ?>スポンサーリンク