要素の親子関係:ホームページ作成・基礎講座・HTML・CSS・javascript・SEO対策

超初心者でも簡単にできるホームページ作成,HTML基礎講座 EasyStudyHTML

ホームページ作成 HTML基礎講座 要素の親子関係

ホームページ作成・HTML基礎・スタイルシート(CSS)・javascript・SEO対策



要素の親子関係 clear.gif
【解説】スタイルシート:要素の親子関係
HTMLの構造における要素同士の関係(親子関係)を使ってスタイルを適用する方法。

■要素同士の関係(以下の3種類あります)
方法1
特定要素(親)の下位の階層に位置する要素(子孫)に対してのみスタイルを設定する方法。
※セレクタとして、親要素とスタイルの設定対象となる子孫の要素を1バイトスペースで区切って記述します。
【書式】
親要素 子孫となる要素{プロパティ:値}
【書式-例】
p em { background-color: #ff0000; font-weight : bold }
上記の例では、<p></p>タグ内の<em></em>だけに適用されます。
他のタグ内に、<em></em>が存在しても対象とはなりません。

方法2
対象となる要素が特定要素の直下の子要素になった場合のみにスタイルを設定する方法。
※セレクタとして、スタイルの設定対象となる要素の直接の親要素と対象要素(子要素)を「>」で挟んで記述します。
【書式】
親要素 > 設定対象となる子要素{プロパティ:値}
【書式-例】
p > em { background-color: #ff0000; font-weight : bold }
上記の例ではp要素の直下の子要素であるem要素に適用されます。
それ以外は対象外です。

方法3
対象となる要素が同じ親要素をもつ特定要素の直後に位置する場合のみにスタイルを設定する方法。
※セレクタとして設定対象となる要素の直前の要素と対象要素を「+」を挟んで記述します。
【書式】
直前の要素 + 設定対象となる要素{プロパティ:値}
【書式-例】
span + em { background-color: #ff0000; font-weight : bold }
上記の例では、p要素の直下の各em要素の中で、span要素の次に現れるem要素のみにスタイルが適用されます。
それ以外のem要素には適用されません。


ページトップへ
TOP | 利用規約(免責) | お問合せ

Agora