css

何番目系CSS

投稿日:

種類 -child -of-type
最初 :first-child :first-of-type
最後 :last-child :last-of-type
n番目 :nth-child(n) :nth-of-type(n)
後ろからn番目 :nth-last-child(n) :nth-last-of-type(n)
1個だけ :only-child :only-of-type

 

X番目からYまで

:nth-child(n+X)

X番目以降(X番目から最後まで)

:nth-of-type(n+X)

ある要素のX番目以降(X番目から最後まで)

:nth-child(-n+X)

X番目以前(最初からX番目まで)

:nth-of-type(-n+X)

ある要素のX番目以前(最初からX番目まで)

 

最後からX個

:nth-last-child(-n+X)

最後からX個
:nth-last-of-type(-n+X)

ある要素の最後からX個
最後からX番目以前

:nth-last-child(n+X)

最後からX番目以前
:nth-last-of-type(n+X)

ある要素の最後からX番目以前

 

https://qiita.com/ituki_b/items/62a752389385de7ba4a2

-css
-

関連記事

no image

蛍光ペン効果

 background:linear-gradient(transparent 60%, #ff6 60%);

no image

IE11で背景にSVG画像、background-positionが効かない

SVGタグに「preserveAspectRatio=”xMinYMid”」 ただしケースによって以下に変更する必要がある。 xMinYMin xMidYMin xMaxYMin xMinYMid x …

no image

CSSのシャドウ

https://ics.media/entry/200406/?fbclid=IwAR1dyqZTB6WjXWOnrefCKXttwukvkkseTEWi2Hari_ozzPvgSrj1ADMKO60 …

no image

Flexboxについてまとめ

引用 日本語対応!CSS Flexboxのチートシートを作ったので配布します Flexboxの古い仕様とベンダープレフィックスまとめ

no image

CSSジェネレータ

引用 いろいろ http://photoshopvip.net/123398 グラデーションジェネレータ Ultimate CSS Gradient Generator box-shadowジェネレー …