CSSコード宝物庫

CSSでよく使うコードだけを集めました。

CSSコード


/*奇数番目の要素*/
li:nth-child(odd){}

/*偶数番目の要素*/
li:nth-child(odd){}

/*上から2番目の要素*/
li:nth-child(2){}

/*上から2番目以降の要素*/
li:nth-child(n+2){}

/*画像のカバー化*/
.wrp{position: relative;}
.wrp > img {height: 100%; -o-object-fit: cover; object-fit: cover; width: 100%;}

/*横複数行に配置*/
.fx-wrp{-webkit-flex-wrap:wrap; flex-wrap:wrap;}

/*中央に配置*/
.fx-coc{-webkit-justify-content:center; justify-content:center;}

/*最初と最後のアイテムは端に、残りは等間隔*/
.fx-bet{-webkit-justify-content:space-between; justify-content:space-between;}

/*等間隔に配置*/
.fx-aro{-webkit-justify-content:space-around; justify-content:space-around;}

/*クロス軸の中央に配置*/
.fx-itc{-webkit-align-items:center; align-items:center;}

/*クロス軸の始点に配置*/
.fx-str{-webkit-align-items:flex-start; align-items:flex-start;}

/*クロス軸の終点に配置*/
.fx-end{-webkit-align-items:flex-end; align-items:flex-end;}

/*コンテナの左側に配置*/
.fx-cst{-webkit-justify-content:flex-start; justify-content:flex-start;}

/*コンテナの右側に配置*/
.fx-cst{-webkit-justify-content:flex-end; justify-content:flex-end;}