■要素同士の関係（以下の3種類あります）
方法１
特定要素（親）の下位の階層に位置する要素（子孫）に対してのみスタイルを設定する方法。
※セレクタとして、親要素とスタイルの設定対象となる子孫の要素を1バイトスペースで区切って記述します。
【書式】
親要素 子孫となる要素｛プロパティ：値｝
【書式-例】
p em { background-color: #ff0000; font-weight : bold }
上記の例では、<p></p>タグ内の<em></em>だけに適用されます。
他のタグ内に、<em></em>が存在しても対象とはなりません。
方法２
対象となる要素が特定要素の直下の子要素になった場合のみにスタイルを設定する方法。
※セレクタとして、スタイルの設定対象となる要素の直接の親要素と対象要素（子要素）を「＞」で挟んで記述します。
【書式】
親要素 > 設定対象となる子要素｛プロパティ：値｝
【書式-例】
p > em { background-color: #ff0000; font-weight : bold }
上記の例ではp要素の直下の子要素であるem要素に適用されます。
それ以外は対象外です。
方法３
対象となる要素が同じ親要素をもつ特定要素の直後に位置する場合のみにスタイルを設定する方法。
※セレクタとして設定対象となる要素の直前の要素と対象要素を「＋」を挟んで記述します。
【書式】
直前の要素 ＋ 設定対象となる要素｛プロパティ：値｝
【書式-例】
span + em { background-color: #ff0000; font-weight : bold }
上記の例では、p要素の直下の各em要素の中で、span要素の次に現れるem要素のみにスタイルが適用されます。
それ以外のem要素には適用されません。
|
