読者です 読者をやめる 読者になる 読者になる

tamlog

主にwebのフロント回り たまに登山

nth-child(n)とnth-of-type(n)について

スポンサーリンク

cssの擬似クラス:nth-child(n)と:nth-of-type(n)についてメモです。

dtの3番目を指定したくて :nth-child(n)えばいいのかと思い指定してみたんですが、 うまくいかず悩んでいたのですが… 【html】 [html]

テキスト1

内容内容内容内容

テキスト2

内容内容内容内容

テキスト3

内容内容内容内容

テキスト4

内容内容内容内容

[/html] 【css】 [css] dl dt:nth-child(3):before { background:url(../img01.jpg) top left no-repeat; } [/css]

:nth-child(n)は、 ”親要素の n 番目の子要素である 要素にスタイルを適用” :nth-of-type(n)は、”兄弟関係にある n 番目の 要素にスタイルを適用”

とのこと、

nth-childはddも含んだ番号で nth-of-typeはdtの番号ってことのようです。

なので これで指定! [css] dl dt:nth-of-type(3):before { background:url(../img01.jpg) top left no-repeat; } [/css]

:nth-child(n)を使う場合はddの数も考えてこれでok! [css] dl dt:nth-child(5):before { background:url(../img01.jpg) top left no-repeat; } [/css]