Irohabook
CSS ブロック要素

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

広告

コンピューター コンピューター
プログラミング プログラミング
数学 数学
英語 英語
国語 国語
理科 理科
社会 社会