CSSで何番目の要素に対して指定する方法
例えば、対象のHTMLコードが修正できなく、
classやidが無いなどで
何番目かの要素に対してCSSを指定したい場合
以下の通り指定いただくと解決します。
最初の要素
:first-child
:first-of-type
最後の要素
:last-child
:last-of-type
最初からX番目
:nth-child(X)
:nth-of-type(X)
最後からX番目
:nth-last-child(X)
:nth-last-of-type(X)
最初からXまで
:nth-child(-n+X)
:nth-of-type(-n+X)
最後からXまで
:nth-last-child(-n+X)
:nth-last-of-type(-n+X)
X以降
:nth-child(n+X)
:nth-of-type(n+X)
X以前
:nth-last-child(n+X)
:nth-last-of-type(n+X)
Xの倍数
:nth-child(Xn)
:nth-of-type(Xn)
注意点
「nth-child」は、単純に要素を数えた数を指定するため「何番目のdivタグ」のような指定が出来ません。
「nth-of-type」は、指定した要素のみ数えることが出来るため、「何番目のdivタグ」といった感じで特定の要素に対する指定ができます。
この記事が良かったら応援クリック🌿 励みになります✨
