子孫セレクタ

TOPページに戻る > CSS

スポンサード リンク

子孫セレクタ

要素の中にある要素にスタイルを適用する時に使います
1つ目の要素が親要素の指定、2つ目がスタイルを適用する要素です
最後の要素にスタイルを適用するので、その前の要素は場所を指定しているだけです。(スタイルの適用は最後の要素のみです)
1つ目の要素と2つ目の要素の間は半角スペースで区切ります
孫セレクタもできます。その場合は、3つ目のセレクタがスタイルを適用するセレクタです

使い方
親要素 子要素 孫要素 { プロパティ : 値; }
対応ブラウザ ie6 ie7 ie8 ie9 ie10 ie11 google Chrome safari fire fox opera

div要素の中にあるp要素のスタイルを変更する場合(子セレクタ)2つ目のp要素にスタイルを適用
div p { プロパティ : 値; }

div要素の中にあるp要素のリンクのスタイルを変更する場合(孫セレクタ)3つ目のセレクタa要素にスタイルを適用
※3つ目の要素を指定しなくても継承ができるプロパティなら、孫要素にも受け継がれます
div p a { プロパティ : 値; }

実際の指定方法

cssファイル (b要素, strong要素の文字の色を赤に変更)

div p { color : red; }

html部分

<div><p>子セレクタ</p></div>

実際の表示

子セレクタ


親要素をclassセレクタで絞り込む


適用箇所を限定したい場合は親要素にclassセレクタやidセレクタをつけます

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を優先


子供セレクタ

直接の子要素にだけスタイルを設定する場合に使います
「>」で要素名を区切って使います。最初の要素が親要素、2番目の要素がスタイルを設定する子要素です
IE7から対応しています。IE6は未対応です

使い方
親要素>子要素 { プロパティ : 値; }
対応ブラウザ ie7 ie8 ie9 ie10 ie11 google Chrome safari fire fox opera

div要素の中にあるp要素のスタイルを変更する場合、2つ目のp要素にスタイルを適用
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からは子セレクタを使えます
ieはその他にもバグが多いので確認が必要です



(C)2012 ホームページ作成無料