名前 | 説明 | 例 |
:nth-child(index/even/odd/equation) | は、親要素の下にあるN番目の子要素または奇数-偶数要素と一致します ' : eq(index)' は 1 つの要素のみに一致しますが、これはすべての親要素の子要素に一致します。 :nth-child は 1 から始まり、:eq() は 0 から始まります。 以下を使用できます: | 各 ul の 2 番目の li を検索します: $("ul li:nth-child(2)") |
:first-child | 最初の子の要素と一致します ':first' は 1 つの要素のみに一致し、このセレクターは各親要素に対して 1 つの子要素に一致します | 各 ul の最初の li を検索します: $("ul li:first-child ") |
:last-child | は最後の子要素と一致します ':last' は 1 つの要素のみと一致しますが、このセレクターは各親要素に対して 1 つの子要素と一致します | in 各 ul の最後の li を検索します。 $("ul li:last-child") |
:only-child | 要素が親要素内の唯一の子要素である場合、その要素が一致します 親要素に他の要素が含まれている場合、一致しません。 | ulの唯一の子要素であるliを検索します: $("ul li:only-child") |
注:
1. :nth-child(index) は 1 から始まり、eq(index) は 0、つまり $("ul li:nth-child(0)") から始まります。 "color","red") は一致する要素を取得できず、1 からのみ開始できます。つまり、$("ul li:nth-child(1)").css("color","red" )、および eq( 0) を取得できます。同様に最初の子要素を取得します :nth-child(even) は偶数番目の子要素、つまり 2 番目、4 番目、6 番目... を取得します。そして :evenインデックス 0 から始まり、2 番目のインデックス、4 番目のインデックスと一致します...つまり、1 番目、3 番目、5 番目...、それらはすべて奇数のアイテムを取得するようです。同じことが :nth-child (odd) にも当てはまります) と :odd
2。:first-child は各親クラスの子要素に一致しますが、:first は子要素に一致し、同じことが :last-child と last
3 にも当てはまります。要素は親要素内の唯一の子要素です。つまり、現在の子要素がクラス内の唯一の要素である場合、それは一致します。
りー