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

などとする。