CSS3

よく使うCSS3のコードを掲載しています。

目次

n番目

n番目の子要素
// 奇数
:nth-child(odd)

// 偶数
:nth-child(even)

// 1,5,9...
:nth-child(4n+1)

// 1,4,7...
:nth-child(3n+1)
ある要素のn番目の子要素
// 奇数
:nth-of-type(odd)

// 偶数
:nth-of-type(even)

// 1,5,9...
:nth-of-type(4n+1)

// 1,4,7...
:nth-of-type(3n+1)

アニメーション

アニメーションを適用
transition: 0.3s ease-out;

画像

背景画像に複数指定
background-image: url(画像1), url(画像2), url(画像3), url(画像4);
background-repeat: 画像1, 画像2, 画像3, 画像4;
background-position: 画像1, 画像2, 画像3, 画像4;

装飾

蛍光ペン
background: linear-gradient(transparent 30%, #fff228 30%);