[2] [[擬似クラス]]である [DFN[[CODE(CSS)@en[[[:nth-child()]]]]]], [DFN[[CODE(CSS)@en[[[:nth-last-child()]]]]]], [DFN[[CODE(CSS)@en[[[:nth-of-type()]]]]]], [DFN[[CODE(CSS)@en[[[:nth-last-of-type()]]]]]], [DFN[[CODE(CSS)@en[[[:first-child]]]]]], [DFN[[CODE(CSS)@en[[[:last-child]]]]]], [DFN[[CODE(CSS)@en[[[:only-child]]]]]], [DFN[[CODE(CSS)@en[[[:only-of-type]]]]]] は、[[親要素]]中の[[要素]]の位置によって[[一致]]するものです。 * 仕様書 [REFS[ - [1] [CITE@en[Selectors Level 3]] ([TIME[2011-09-29 22:16:17 +09:00]] 版) ]REFS] * 意味 [3] [CODE(CSS)@en[[[:nth-child()]]]] は、最初の[[子要素]]を1番目として数えた時、 引数で指定された位置にある[[要素]]を表します [SRC[>>1 6.6.5.2.]]。 [CODE(CSS)@en[[[:nth-of-type()]]]] は更に[[要素名]]が同じ[[展開名]]であるものだけ数える、 との条件を加えたものです [SRC[>>1 6.6.5.4.]]。 [4] [CODE(CSS)@en[[[:nth-last-child()]]]] は、最後の[[子要素]]を1番目として数えた時、 引数で指定された位置にある[[要素]]を表します [SRC[>>1 6.6.5.3.]]。 [CODE(CSS)@en[[[:nth-last-of-type()]]]] は更に[[要素名]]が同じ[[展開名]]であるものだけ数える、 との条件を加えたものです [SRC[>>1 6.6.5.5.]]。 [5] 次の[[擬似クラス]]はいずれも同じ意味です。ただし[[詳細度]]は異なることがあります。 - [6] [CODE(CSS)@en[[[:first-child]]]] と [CODE(CSS)@en[[[:nth-child]](1)]] [SRC[>>1 6.6.5.6.]] - [7] [CODE(CSS)@en[[[:first-of-type]]]] と [CODE(CSS)@en[[[:nth-of-type]](1)]] [SRC[>>1 6.6.5.8.]] - [8] [CODE(CSS)@en[[[:last-child]]]] と [CODE(CSS)@en[[[:nth-last-child]](1)]] [SRC[>>1 6.6.5.7.]] - [9] [CODE(CSS)@en[[[:last-of-type]]]] と [CODE(CSS)@en[[[:nth-last-of-type]](1)]] [SRC[>>1 6.6.5.9.]] - [10] [CODE(CSS)@en[[[:only-child]]]] と [CODE(CSS)@en[[[:first-child]][[:last-child]]]] [SRC[>>1 6.6.5.10.]] - [11] [CODE(CSS)@en[[[:only-of-type]]]] と [CODE(CSS)@en[[[:first-of-type]][[:last-of-type]]]] [SRC[>>1 6.6.5.11.]] * 引数 [13] [CODE(CSS)@en[[[:nth-child]]]], [CODE(CSS)@en[[[:nth-last-child]]]], [CODE(CSS)@en[[[:nth-of-type]]]], [CODE(CSS)@en[[[:nth-last-of-type]]]] は[[括弧]]で括って[[要素]]の位置を表す文字列を指定しなければなりません。 [14] この値は、 - [CODE(CSS)[[VAR[a]]n+[VAR[b]]]] - [CODE(CSS)@en[[[even]]]] - [CODE(CSS)@en[[[odd]]]] ... のいずれかでなければなりません。 ** [CODE(CSS)@en[[VAR[a]]n+[VAR[b]]]] [17] [DFN[[CODE(CSS)@en[[VAR[a]]n+[VAR[b]]]]]] は、この式の [VAR[n]] に[[0]][[以上]]の[[整数]]を代入して得られる数値で表される位置を表します [SRC[>>1 6.6.5.2.]]。 [EG[ [18] 例えば [CODE(CSS)@en[4n+3]] は 3 番目、7 番目、11 番目、... を表します。 ]EG] ;; [26] 0 以下の数値が得られるとしても、[[要素]]の位置は1番から数え始めるので、 その値は意味がありません。どの[[要素]]とも一致しません。[SRC[>>1 6.6.5.2.]] [19] [VAR[a]] と [VAR[b]] は[[整数]]でなければなりません。数値は [CODE[[[0]]]] ... [CODE[[[9]]]] の[[数字]]を連ねて表します。 [CODE(CSS)[[[+]]]] や [CODE(CSS)[[[-]]]] を[[符号]]として数値の前に付けることができます。ただし [VAR[b]] については直前の [CODE(CSS)[[[+]]]] のかわりに[[符号]]を使います。 [SRC[>>1 6.6.5.2.]] [EG[ [20] 例えば [CODE(CSS)[+4n-2]] や [CODE(CSS)[-2n-3]] のように表せます。 ]EG] ;; [21] (多分自明なので) 明記されていませんが、数値は十進整数として表します。 [22] [VAR[a]] や [VAR[b]] が 0 の時は[[項]]ごと省略できますが、両方を省略することはできません。 また最初の項の[[符号]]が [CODE[[[+]]]] なら、これも省略できます。[SRC[>>1 6.6.5.2.]] [EG[ [23] 例えば [CODE(CSS)[4n]] (= [CODE(CSS)[4n+0]]) や [CODE(CSS)[5]] (= [CODE(CSS)[+5]] = [CODE(CSS)[0n+5]]) のように表せます。 [CODE(CSS)[0n+0]] は [CODE(CSS)[0]] と等価ですが、これ以上は省略できません。 (ただし [CODE[0]] は 0 番目を表し、[[要素]]は1番から数え始めるので、何とも一致しません。) ]EG] [24] [VAR[a]] の[[絶対値]]が1なら、数値部分を省略できます。[SRC[>>1 6.6.5.2.]] [EG[ [25] 例えば [CODE(CSS)@en[1n+4]] は [CODE(CSS)[n+4]]、 [CODE(CSS)@en[-1n+2]] は [CODE(CSS)[-n+2]] と表せます。 ]EG] ** [CODE(CSS)@en[even]] [15] [DFN[[CODE(CSS)@en[[[even]]]]]] は [CODE(CSS)@en[[[2n]]]] と同じです [SRC[>>1 6.6.5.2.]]。 [[偶数]]番目を表します。 ** [CODE(CSS)@en[odd]] [16] [DFN[[CODE(CSS)@en[[[odd]]]]]] は [CODE(CSS)@en[[[2n+1]]]] と同じです [SRC[>>1 6.6.5.2.]]。 [[奇数]]番目を表します。 * 構文 [27] 引数の括弧の内側には[[空白]]を挿入できます。[SRC[>>1 6.6.5.2.]] [28] [CODE(CSS)[[VAR[a]]n+[VAR[b]]]] 形式で2つの[[項]]が両方現れる場合の途中の [CODE(CSS)[[[+]]]] や [CODE(CSS)[[[-]]]] の前後には[[空白]]を挿入できます。[SRC[>>1 6.6.5.2.]] ;; [29] どちらかの[[項]]だけしか表れない場合、その[[符号]]の後には[[空白]]は挿入できません。 [SRC[>>1 6.6.5.2.]] * 大文字と小文字 [12] [[擬似クラス]]の種類を表す部分も引数も[[ASCII大文字・小文字不区別]]です。