よく使うCSS結合子

概要

よく使うCSS結合子です。
（sassで記述しています。）

結合子

セレクタを結合子で組み合わせると、シーン別に個別に指定をすることができます。
やり過ぎるとメンテナンス性が著しく悪くなるので、シンプルに使うことがポイントです。

A B

子孫セレクタ。
A要素の子孫であるすべてのB要素に適用されます。

div p
  color: red

A > B

子セレクタ。
A要素の子であるすべてのB要素に適用されます。

div > p
  color: red

A + B

隣接セレクタ。
A要素の直後に現れるB要素のみに適用されます。

h2 + p
  color: red

A ~ B

間接セレクタ。
A要素のあとに現れるB要素のみに適用されます。

h2 ~ p
  color: red