1. kudo_kk

    No comment

    kudo_kk
Changes in body
Source | HTML | Preview
@@ -1,78 +1,79 @@
# 擬似クラスによるカラムレイアウト
- フロントエンド開発をしていると必ずカラムレイアウトが登場します。(正確には、グリッドレイアウトを用いたグリッドシステム、グリッドデザインと呼ぶ)
+ フロントエンド開発をしていると必ずカラムレイアウトが登場します。
+(正確には、グリッドレイアウトを用いたグリッドシステム、グリッドデザインと呼ぶ)
そのカラムに対して、まるでテーブルレイアウトのようにborderなどを適用することがあるが、擬似クラスを用いると<font color="red">プロパティの打ち消しを全くすることなく</font>実現できるので、健忘録がてら投稿致します。
※擬似クラス(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 { /* 1〜9 */
border-top: 1px solid gray;
border-left: 1px solid gray;
}
.item:nth-child(3n) { /* 3, 6, 9 */
border-right: 1px solid gray;
}
.item:nth-last-child(-n+3){ /* 7〜9 */
border-bottom: 1px solid gray;
}
```
## 上下ボーダーのいらないカラムレイアウト
![image.png](https://qiita-image-store.s3.amazonaws.com/0/192967/5c11dc1b-1de9-f7d9-50ea-ebc5c0a5d648.png)
```css
.item { /* 1〜9 */
border-left: 1px solid gray;
}
.item:nth-child(3n) { /* 3, 6, 9 */
border-right: 1px solid gray;
}
.item:not(:nth-last-child(-n+3)){ /* 1〜6 */
border-bottom: 1px solid gray;
}
```
## 上下左右ボーダーのいらないカラムレイアウト
![image.png](https://qiita-image-store.s3.amazonaws.com/0/192967/dac8a972-228c-68b1-d231-a0e82492d1f6.png)
```css
.item:not(:nth-child(3n)) { /* 1, 2, 4, 5, 7, 8 */
border-right: 1px solid gray;
}
.item:not(:nth-last-child(-n+3)) { /* 1〜6 */
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クラスなら適用
#### 注意点
- 上記のようにセレクタに連結して条件を増やすことができるが、連結しただけ詳細度が上昇する
※正確には、
>否定擬似クラスの :not は詳細度の計算では擬似クラスとは見なされません。しかし、否定擬似クラスの中に置かれたセレクタは、通常のセレクタのように計算されます。
引用:[MDN](https://developer.mozilla.org/ja/docs/Web/CSS/Specificity)
## 参考
- [何番目系の便利なcssまとめ](https://qiita.com/ituki_b/items/62a752389385de7ba4a2)