【CSS】セレクタ組み合わせのまとめ

小孫セレクタ(a b)

  • css
.div1 {
  color: red;
  .div2 {
    color: blue;
  }
}
  • html
<div className="div1">
  red
  <div className="div2">
    blue
  </div>
</div>

(a.b)　※上記の(a b)との違い

  • css
.div1.div2 {
  color: red;
}
  • html
<div className="div1 div2">
  red
</div>

子セレクタ(a > b)

  • css
.div1 > .div2 {
  color:red;
}
  • html
<div className="div1">
  <div className="div2">div2(〇)</div>
  <div className="div3">div3(×)</div>
  <div><div className="div2">div2(×)</div></div>
  <div className="div2">div2(〇)</div>
</div>

隣接セレクタ(a + b)

  • css
.div1 + .div2 {
  color:red;
}
  • html
<div>
  <div className="div1">div1(×)</div>
  <div className="div2">div2(〇)</div>
  <div className="div2">div2(×)</div>
</div>

間接セレクタ(a ~ b)

  • css
.div1 ~ .div2 {
  color:red;
}
  • html
<div>
  <div className="div1">div1(×)</div>
  <div className="div2">div2(〇)</div>
  <div><div className="div2">div2(×)</div></div>
  <div className="div2">div2(〇)</div>
</div>

親セレクタ参照(&)

  • css
.div1 {
  &.div2 {
    color: red;
  }
}
  • html
<div className="div1 div2">
  red
</div>

備考

もっと良いの書いてる人がいました…
CSSセレクタのチートシート

未分類CSS

Posted by ababa