メモ

memo

メモ

CSSセレクタで最後の要素が奇数だったときを指定する


デザイナーさんから、2カラムの要素が3つあったとき、最後の3つめは1カラムにしたいという要望があり、思いついた実装方法です。あまり更新しないコンテンツでしたが、要素が増えたときにCSSを書き直しが発生するのが嫌で、この書き方にたどり着きました。

HTML

<ul>
  <li>111</li>
  <li>222</li>
  <li>333</li>
</ul>

CSS

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
li {
  float: left;
  width: 50%;
  padding: 20px;
  border: 1px solid #FFF;
  background: skyblue;
  box-sizing: border-box;
}
li:nth-child(2n+1):last-child {
  width: 100%;
  background: tomato;
}

デモ(Codepen)


要素が5つ、7つになっても適用されます。

1つめの要素を1カラムにしたいとき

ちなみに、last-childをfirst-childに変更すると、初めの要素に適用できます。

CSS

li:nth-child(2n+1):first-child {
  width: 100%;
  background: tomato;
}

デモ(Codepen)


インスピレーション元

普段だったら諦めているんですが、インスピレーション元があったので思いつきました。インスピレーション元は以下の記事です。

実装したときに驚いたのは、この記事が1年前の記事だったことです。1年前の記事をぱっと思い出せるほど、この記事は私の印象に残っていたようです。

CMSで動的コンテンツを表示したときにたびたびレイアウトの不自由さを感じていたのですが、私が思っていたよりもCSSセレクタが助けてくれる場面がありそうです。


関連タグ

この記事をシェアする

著者

デザイナー

森田かすみ

名古屋のスタートアップで働く、デジタルプロダクトデザイナー。

2013年に新卒でWeb制作会社に入社し、受託制作のマークアップエンジニアとして勤務した後、CMS開発部門のデザイナーへ転身。

2023年5月にSaaSのプロダクトデザイナーへ転身。
現在は新機能にまつわるUXを考慮したUI設計、機能マーケティング支援などを担当。
ストレス発散方法はかっぱのイラストを描くこと。

おすすめ記事

この記事のハッシュタグ から関連する記事を表示しています。

他の方法で記事を探す

2024年5月

年間カレンダーへ
    1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31