※当サイトは、Google Adsense、Amazonアソシエイト等アフィリエイト広告を利用しています。

CSSで何番目の要素に対して指定する方法

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タグ」といった感じで特定の要素に対する指定ができます。

CSS

Posted by Hiro先生