擬似クラスのカラムレイアウトでの便利な使用方法

擬似クラスによるカラムレイアウト

フロントエンド開発をしていると必ずカラムレイアウトが登場します。

そのカラムに対して、まるでテーブルレイアウトのようにborderなどを適用することがあるが、擬似クラスを用いると便利なので、健忘録がてら投稿致します。

※擬似クラス(nth-child, nth-of-type)の詳細に関しては、擬似クラス nth-childとnth-of-typeをご確認ください。

単純なカラムレイアウト

image.png

.item {
  border-top: 1px solid gray;
  border-left: 1px solid gray;
}
.item:nth-child(3n) {
  border-right: 1px solid gray;
}
.item:nth-last-child(-n+3){
  border-bottom: 1px solid gray;
}

上下ボーダーのいらないカラムレイアウト

image.png

.item {
  border-bottom: 1px solid gray;
  border-left: 1px solid gray;
}
.item:nth-child(3n) {
  border-right: 1px solid gray;
}
.item:nth-last-child(-n+3){
  border-bottom: none;
}

使用した便利な擬似クラス nth-last-child

  • nth-last-child(n): 最後からn番目に適用される
  • nth-last-child(-n+3): 最後から3番目まで適用される

nth-first-child(-n+3)も同様で、最初から3番目まで適用される。

メリット

  • プロパティの上書き回数を少なく、感覚的にレイアウトを実装することができる。

これらを使いこなせると他にも様々な応用ができると考えられる。

参考

[紹介元] HTMLタグが付けられた新着投稿 – Qiita 擬似クラスのカラムレイアウトでの便利な使用方法

関連記事