リストなどで要素を並べて、最後の要素だけマージンを変えたいという場合。
.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;
}
などとする。
