mania-ku

何か作りたいプログラマ未満。

【CSS3】n番目の要素

親要素から見てn番目の要素もの

要素:nth-child(条件) 親要素内で条件にあう要素の場合は、スタイルを適用。nth-child(数字)の場合は何番目、nth-child(even)の場合は偶数、nth-child(odd)の場合は奇数、3n+1の場合は1,4,7…の要素がスタイルを適用する。
要素:nth-last-child(条件) 親要素内で後ろから数えて条件にあう要素の場合は、スタイルを適用。
要素:first-child 親要素内で最初の要素にスタイルを適用
要素:last-child 親要素内で最後の要素にスタイルを適用
要素:only-child 親要素に対して子要素が1つだけある場合は、スタイルを適用

ある要素のうちn番目の要素もの

要素:nth-of-type 条件にあう要素の場合は、スタイルを適用。nth-child(数字)の場合は何番目、nth-child(even)の場合は偶数、nth-child(odd)の場合は奇数、3n+1の場合は1,4,7…の要素がスタイルを適用する。
要素:nth-last-of-type(条件) 後ろから数えて条件にあう要素の場合は、スタイルを適用。
要素:first-of-type 最初の要素にスタイルを適用
要素:last-of-type 最後の要素にスタイルを適用
要素:only-of-type 1つだけある要素の場合は、スタイルを適用

同じように指定しても、このような違いがあります。

参考:n番目に来る要素を指定する|ドットインストール
ある要素のうち、n番目に来る要素|ドットインストール

Pocket
LINEで送る