※当サイトは、Google Adsense、Amazonアソシエイト、各種アフィリエイト広告を利用しています。また、製品PRを行っている場合があります。
Hiro先生のマルチ情報・技術ブログ。技術・生活・思考から、より良き人生へ繋がるヒントを発信。
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タグ」といった感じで特定の要素に対する指定ができます。
＼応援ありがとうございます🌿／
各種ブログランキングに参加しています✨
