スポンサード リンク
子孫セレクタ
要素の中にある要素にスタイルを適用する時に使います親要素 子要素 孫要素 { プロパティ : 値; }
対応ブラウザ |
div p { プロパティ : 値; }
div p a { プロパティ : 値; }
実際の指定方法
cssファイル (b要素, strong要素の文字の色を赤に変更)
div p { color : red; }
html部分
<div><p>子セレクタ</p></div>
実際の表示
子セレクタ
親要素をclassセレクタで絞り込む
cssファイル (div要素のhogeとゆうクラス名の中にあるp要素のみにスタイルを適用)
div.hoge p { color : red; }
html部分
<div class="hoge"><p>子セレクタ</p></div>
優先順位
※子孫セレクタは親と子のポイント数が足されます。同じポイントの場合の優先順位は下に書いたcssが優先されますdiv.hoge p { color : red; } /* この場合は、要素が1つ+class+要素1つなので1+10+1=12ポイント */ .hoge p { color : blue; } /* この場合は、クラス+要素1つなので10+1=11ポイント */
実際の表示
div要素にhogeクラス名をつけた場合、優先されるのはポイントが高いほうです
idセレクタ | 100ポイント |
class、擬似クラス | 10ポイント |
要素のみ(要素2個だと2ポイント) | 1ポイント |
全称セレクタ | 0ポイント |
セレクタ | 計算 | ポイントが同じ場合 |
グループ化 | カンマで区切られた要素ごとに合計 | 下に書いてあるcssを優先 |
子孫セレクタ | 全てのセレクタの合計 | 下に書いてあるcssを優先 |
子供セレクタ
直接の子要素にだけスタイルを設定する場合に使います親要素>子要素 { プロパティ : 値; }
対応ブラウザ |
div>p { プロパティ : 値; }
実際の指定方法
cssファイル
div>p { color:red; }
html部分
<div><p>子供セレクタ</p></div>
実際の表示
子セレクタ
子孫セレクタとの違い
cssファイル
div>b { color : red;} こちらが子供セレクタ div b { color : red;} こちらが子孫セレクタ
html部分
<div><p>子セレクタ<b>孫セレクタ</b></p></div>
実際の表示
子セレクタ 孫セレクタ こちらが子供セレクタで孫セレクタのスタイルを変更
子セレクタ 孫セレクタ こちらが子孫セレクタで孫セレクタのスタイルを変更
子供セレクタは孫セレクタのスタイルを変更できませんでしたが、子孫セレクタは適用できています
※ブラウザie6が子供セレクタに対応していません。ie7からは子セレクタを使えます