「CSS入門」セレクターの子結合子 (>)を使う方法

2014年1月5日2020年10月19日

構文
セレクター1 > セレクター2 { スタイルプロパティ }
子結合子 (>) は2つの CSS セレクターの間に配置されます。
2つ目のセレクターが1つ目のセレクターの直接の子要素の場合にのみマッチします。
CSSコード

span {
  background-color: green;
}

div > span {
  background-color: red;
}

htmlコード

<div>
  <span>11111  「div > span」CSSが適用されます
    <span>22222 「div > span」CSSが適用されません.</span>
  </span>
</div>
<span>3334444 「span」CSSが適用されます</span>