0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

:nth-child()を使った打消しの盲点

Last updated at Posted at 2019-07-25

スマホとPC(タブレット)でカラムを変えたい時に、
:nth-child()を使った打消し時に嵌った点をメモします。

例:自動でn列の時に最後のサイドmarginを削ってくれるシステム

style.sass
      li
        &:not(:nth-child(2n))
          margin-right: 10px
        @media only screen and (min-width:640px)
          &:not(:nth-child(3n))
            margin-right: 10px

上記の様に書いたら全然打消ししない。
もしかしなくても:not(:nth-child(2n)):not(:nth-child(3n))は別のセレクタ扱い???🤔

style.sass
      li
        &:not(:nth-child(2n))
          margin-right: 10px
        @media only screen and (min-width:640px)
          &:not(:nth-child(2n))
            margin-right: auto
          &:not(:nth-child(3n))
            margin-right: 10px

上手くいきました🤣🤣🤣

0
0
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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?