CSSで最初(最後)の要素だけのマージンや幅を変える

リストなどで要素を並べて、最後の要素だけマージンを変えたいという場合。

.header__social ul {
    display: flex;
}

.header__social ul li {
    margin-right: 16px;
}

.header__social ul li:last-child {
    margin-right: 0;
}

リストに last-child をつなげると、それはリストの最後の要素を表します。上のコードは要素の最後だけ右マージンを 0 にしている。

同様に要素の最初にデザインを入れたいときは

.header__social ul li:first-child {
    margin-right: 0;
}

などとします。

CSS

広告

広告

広告

技術

言語

高校理系

高校文系

中学

小学

エッセイ

姉妹サイト