1. kudo_kk

    No comment

    kudo_kk
Changes in body
Source | HTML | Preview

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

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

そのカラムに対して、まるでテーブルレイアウトのように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-left: 1px solid gray;
}
.item:nth-child(3n) {
  border-right: 1px solid gray;
}
.item:not(:nth-last-child(-n+3)){
  border-bottom: 1px solid gray;
}

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

image.png

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

使用した便利な擬似クラス

nth-last-child

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

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

メリット

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

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

not

  • li:not(.item) //itemクラスでないliタグに適用される
  • .item:nth-child(3n):not(:nth-last-child(-n+3)) //最後から3番目までじゃない、かつ、3の倍数の要素がitemクラスなら適用

注意点

  • 上記のようにセレクタに連結して条件を増やすことができるが、連結しただけ詳細度が上昇する

※正確には、

否定擬似クラスの :not は詳細度の計算では擬似クラスとは見なされません。しかし、否定擬似クラスの中に置かれたセレクタは、通常のセレクタのように計算されます。
引用:MDN

参考