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

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

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

span {

background-color: green;

}

div > span {

background-color: red;

}

span { background-color: green; } div > span { background-color: red; }

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>

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

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

Posted by arkgame