1. kudo_kk

    No comment

    kudo_kk
Changes in body
Source | HTML | Preview
@@ -1,101 +1,101 @@
# 擬似クラスによるカラムレイアウト
フロントエンド開発をしていると必ずカラムレイアウトが登場します。
(正確には、グリッドレイアウトを用いたグリッドシステム、グリッドデザインと呼ぶ)
-そのカラムに対して、まるでテーブルレイアウトのようにborderなどを適用することがあるが、擬似クラスを用いると<font color="red">プロパティの打ち消しを全くすることなく</font>実現できるので、健忘録がてら投稿致します。
+そのカラムに対して、まるでテーブルレイアウトのように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/de352198-3f97-a5e2-0715-462c6449d851.png)
```css
.item { /* 1 〜 9 */
border-left: 1px solid gray;
border-bottom: 1px solid gray;
}
.item:nth-child(3n) { /* 3, 6, 9 */
border-right: 1px solid gray;
}
```
下ボーダーのいらないカラムレイアウトは、.itemのborder-bottomをborder-topに変更するだけで可能。
## 上下ボーダーのいらないカラムレイアウト
![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;
}
```
上下にコンテンツがあるかbox-shadowがかかっている場合に必要になる。
## 上下左右ボーダーのいらないカラムレイアウト
![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;
}
```
BEMで言う、別のBlock内に内包されている場合など需要がある。
右の1列だけborder-rightがいらない。:not(:nth-child(3n))
下の1行だけborder-bottomがいらない。:not(:nth-last-child(-n+3))
お気づきだとは思いますが、行数をいくら増やしても同じ結果が得られるようになっています。
また、今回は、どれも3カラムだが、4カラムでも擬似クラスの中の `3`を `4` にするだけで同様の動作ができる。
## 使用した便利な擬似クラス
### 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)