31
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

CSS|要素の間に余白をつける

Last updated at Posted at 2024-08-18

要素が並んでいて、間に余白をつけるとき、あなたは何派ですか?

  1. それぞれクラス名を別々につける
  2. gap
  3. :not:(first-child)
  4. 隣接セレクタ
  5. その他

今まで隣接セレクタを使う機会が少なかったので、練習しておきます。

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;
      }

他の人が見たら「なんだこれ?」ってなりそうですね。

31
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
31
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?