kzms2 – html,css,javascript

n番目のE要素を指定する「E:nth-of-type(n)」系

「E:nth-child(n)」と何が違うの？と思うでしょうが、こちらの方融通が効くセレクタとなっています。
「E:nth-child(n)」系がEの型以外のものもn番目としてカウントしてしまう一方で、この「E:nth-of-type(n)」系はEの型でn番目のものを指定できます。
※要するに子要素内のn番目のE要素に適用されます。

他の要素をカウントしないn番目のE要素を指定「E:nth-of-type(n)」

子要素の中にある、他の要素を無視して、n番目のE要素を指定できます。
単純に、他の要素が何個あろうとも、n番目のE要素だけに指定できます。

サンプルはこちら#main h3:nth-of-type(odd){
background-color:#ffc;
}
#main h3:nth-of-type(even){
background-color:#fcf;
}

他の要素をカウントしない後ろからn番目のE要素を指定「E:nth-last-of-type(n)」

上の「E:nth-of-type(n)」と似た指定が出来るものです。
他の要素を無視して、後ろからn番目のE要素を指定できます。

サンプルはこちら#main h3:nth-last-of-type(odd){
background-color:#ffc;
}
#main h3:nth-last-of-type(even){
background-color:#fcf;
}

他の要素をカウントしない1番目のE要素を指定「E:first-of-type」

他の要素を無視して、子要素の中の1番目のE要素を指定できます。

サンプルはこちらtd:first-of-type{
background-color:#ccc;
}

他の要素をカウントしない1番最後のE要素を指定「E:last-of-type」

他の要素を無視して、子要素の中の1番最後のE要素を指定できます。

サンプルはこちらtd:last-of-type{
background-color:#ccc;
}

子要素にあるE要素が１つだけだった場合に指定「E:only-of-type」

他の要素を無視して、子要素の中の1番最後のE要素を指定できます。
子要素に何個要素があったとしても、E要素が1つだけだった場合に適用されます。

サンプルはこちら#main h2:only-of-type{
background-color:#ffc;
}

子要素を持たないE要素を指定「E:empty」

子要素を1つも持たないE要素を指定します。

サンプルはこちらtd:empty{
background-color:#ccc;
}

Pages: 1 2 3