CSS2.1のセレクタの復習

CSS2.1　セレクタ

子供セレクタの例

子供セレクタは「p > em」のように「>」を使用して記述します。
以下の例ではpを直接の親とするem要素にマッチします。
結果としてem要素の「吾輩はここで始めて」だけが青文字になります。
子孫セレクタとの違いは直接の子要素のみマッチすることで孫要素はマッチしません。
下の例では2つめのp要素内のspanに囲まれたem要素にはマッチしません。
◆子供セレクタの例
HTMLコード

<h3>吾輩は猫であるを読んで</h3>
  <p>どこで生れたかとんと見当（けんとう）がつかぬ。
何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。<br>
<em>吾輩はここで始めて</em>人間というものを見た。
しかもあとで聞くとそれは書生という人間中で一番獰悪（どうあく）な種族であったそうだ。</p>
  <ul class="note">
    <li>吾輩が<em>この家へ</em>住み込んだ当時</li>
    <li>吾輩の主人は滅多（めった）に吾輩と顔を合せる事がない</li>
  </ul>
  <p><span><em>この書生</em>というのは時々我々を捕（つかま）えて煮（に）て食うという話である。</span>
しかしその当時は何という考もなかったから別段恐しいとも思わなかった。</p>

CSSコード

 p > em { 
   color: blue;
    }

隣接兄弟セレクタ

隣接兄弟セレクタは「ul + p」のように記述します。
これはh3の直後にあるp要素にマッチします。
この例ではulのすぐ後のp要素が青文字になります。
隣接兄弟セレクタの例
HTMLコード

<h3>吾輩は猫であるを読んで</h3>
  <p>どこで生れたかとんと見当（けんとう）がつかぬ。
何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。<br>
<em>吾輩はここで始めて</em>人間というものを見た。
しかもあとで聞くとそれは書生という人間中で一番獰悪（どうあく）な種族であったそうだ。</p>
  <ul class="note">
    <li>吾輩が<em>この家へ</em>住み込んだ当時</li>
    <li>吾輩の主人は滅多（めった）に吾輩と顔を合せる事がない</li>
  </ul>
  <p><span><em>この書生</em>というのは時々我々を捕（つかま）えて煮（に）て食うという話である。</span>
しかしその当時は何という考もなかったから別段恐しいとも思わなかった。</p>

CSSコード

 ul + p { 
   color: blue;
    }