1. kudo_kk

    No comment

    kudo_kk
Changes in body
Source | HTML | Preview
@@ -1,74 +1,75 @@
# 擬似クラスによるカラムレイアウト
フロントエンド開発をしていると必ずカラムレイアウトが登場します。
そのカラムに対して、まるでテーブルレイアウトのようにborderなどを適用することがあるが、擬似クラスを用いると便利なので、健忘録がてら投稿致します。
※擬似クラス(nth-child, nth-of-type)の詳細に関しては、[擬似クラス nth-childとnth-of-type](https://qiita.com/kudo_kk/items/8277c1f0eae18e15dd64)をご確認ください。
+※より実践的な留意点に関しては、[擬似クラス カラムレイアウトでの留意点](https://qiita.com/kudo_kk/items/74e214eaf54bd97df1e4)をご確認ください。
## 単純なカラムレイアウト
![image.png](https://qiita-image-store.s3.amazonaws.com/0/192967/27dcaa25-5d21-0d1e-ce41-5aad9b477b3b.png)
```css
.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](https://qiita-image-store.s3.amazonaws.com/0/192967/5c11dc1b-1de9-f7d9-50ea-ebc5c0a5d648.png)
```css
.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;
}
```
## 上下左右ボーダーのいらないカラムレイアウト
![image.png](https://qiita-image-store.s3.amazonaws.com/0/192967/dac8a972-228c-68b1-d231-a0e82492d1f6.png)
```css
.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(<font color="red">-n+3</font>): 最後から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クラスなら適用
#### 注意点
- 上記のようにセレクタに連結して条件を増やすことができるが、連結しただけ詳細度が上昇する
## 参考
- [何番目系の便利なcssまとめ](https://qiita.com/ituki_b/items/62a752389385de7ba4a2)