要素が並んでいて、間に余白をつけるとき、あなたは何派ですか?
- それぞれクラス名を別々につける
- gap
- :not:(first-child)
- 隣接セレクタ
- その他
今まで隣接セレクタを使う機会が少なかったので、練習しておきます。
See the Pen Untitled by Hiroyuki Doke (@hiroro-d) on CodePen.
隣接セレクタの説明
See the Pen Untitled by Hiroyuki Doke (@hiroro-d) on CodePen.
ちなみにSassを使えば「& + &」で実現できます。
アンバサンド.scss
& + & {
margin-top: 20px;
}
他の人が見たら「なんだこれ?」ってなりそうですね。