[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.]] [30] これらの[[擬似クラス]]による[[要素]]の位置の計算においては、[[要素節点]]のみを数えます。 [[テキスト節点]]などは無視します。[SRC[>>1 6.6.5.]] * 引数 [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大文字・小文字不区別]]です。 * 歴史 ** STTS2 [REFS[ - [34] [CITE[STSS 2]] ([[Daniel Glazman]] 著, [TIME[2000-09-09 01:13:50 +09:00]] 版) ]REFS] [35] [[STTS2]] では [CODE(CSS)@en[DL ~ //DT/]] ([CODE(CSS)[//.../]] = [CODE(CSS)@en[[[:first-child]]]]) や [CODE(CSS)@en[DL ~ /DD//]] ([CODE(CSS)[/...//]] = [CODE(CSS)@en[[[:last-child]]]]) や [CODE(CSS)@en[UL ~ //LI//]] ([CODE(CSS)[//...//]] = [CODE(CSS)@en[[[:only-child]]]]) のような構文が提案されていました。 ;; [36] ちなみに [CODE(CSS)[/.../]] は[[兄弟結合子]]の意味でした。 ** CSS2 [REFS[ - [31] [CITE@en[Selectors]] ([TIME[2011-06-07 22:09:52 +09:00]] 版) ]REFS] [32] [[CSS2]] では [CODE(CSS)@en[[[:first-child]]]] が追加されました。 ** STTS3 [REFS[ - [38] [CITE[STSS 3]] ([TIME[2000-03-13 23:38:54 +09:00]] 版) ]REFS] [37] [[STTS3]] では[[要素]]の位置は[[擬似クラス]]で表すようになりました。 - [CODE(CSS)@en[[[:first-of-type]]]] - [CODE(CSS)@en[[[:not-first-of-type]]]] - [CODE(CSS)@en[[[:last-of-type]]]] - [CODE(CSS)@en[[[:not-last-of-type]]]] - [CODE(CSS)@en[[[:first-of-any]]]] - [CODE(CSS)@en[[[:not-first-of-any]]]] - [CODE(CSS)@en[[[:last-of-any]]]] - [CODE(CSS)@en[[[:not-last-of-any]]]] - [CODE(CSS)@en[[[:only-of-type]]]] - [CODE(CSS)@en[[[:not-only-of-type]]]] - [CODE(CSS)@en[[[:only-of-any]]]] - [CODE(CSS)@en[[[:not-only-of-any]]]] [39] これらは [[XSL]] (現在の [[XPath]]) に由来すると説明されています。 [REFS[ - [40] [CITE[Extensible Stylesheet Language (XSL)]] ([TIME[1998-08-18 21:38:31 +09:00]] 版) ]REFS] ** 選択子3 *** 初期 [REFS[ - [41] [CITE[CSS3 module: W3C selectors]] ([TIME[2000-03-13 23:37:32 +09:00]] 版) ]REFS] [42] [[選択子3]]の最初の公開案である >>41 では - [CODE(CSS)@en[[[:first-child]]]] - [CODE(CSS)@en[[[:not-first-child]]]] - [CODE(CSS)@en[[[:last-child]]]] - [CODE(CSS)@en[[[:not-last-child]]]] - [CODE(CSS)@en[[[:first-of-type]]]] - [CODE(CSS)@en[[[:not-first-of-type]]]] - [CODE(CSS)@en[[[:last-of-type]]]] - [CODE(CSS)@en[[[:not-last-of-type]]]] - [CODE(CSS)@en[[[:only-of-type]]]] - [CODE(CSS)@en[[[:not-only-of-type]]]] - [CODE(CSS)@en[[[:only-child]]]] - [CODE(CSS)@en[[[:not-only-child]]]] - [CODE(CSS)@en[[[:nth-of-type]]]] - [CODE(CSS)@en[[[:not-nth-of-type]]]] - [CODE(CSS)@en[[[:nth-child]]]] - [CODE(CSS)@en[[[:not-nth-child]]]] ... が定義されていました。 *** 後期 [REFS[ - [43] [CITE@en[CSS3 module: W3C Selectors]] ([TIME[2001-01-29 23:57:00 +09:00]] 版) ]REFS] [44] >>43 で [CODE(CSS)@en[[[:not()]]]] が追加されたことにより、否定形はすべて削除されました。 [45] >>43 では [CODE(CSS)@en[[[:nth-last-child()]]]] と [CODE(CSS)@en[[[:nth-last-of-type()]]]] が追加されています。 *** メモ [33] 結局最終的に[[選択子3]]では [CODE(CSS)@en[[[:last-child]]]], [CODE(CSS)@en[[[:first-of-type]]]], [CODE(CSS)@en[[[:last-of-type]]]], [CODE(CSS)@en[[[:nth-child]]]], [CODE(CSS)@en[[[:nth-of-type]]]], [CODE(CSS)@en[[[:nth-last-child]]]], [CODE(CSS)@en[[[:nth-last-of-type]]]], [CODE(CSS)@en[[[:only-child]]]], [CODE(CSS)@en[[[:only-of-type]]]] が追加されました。 ** XBL2 [REFS[ - [46] [CITE@en-US[XBL 2.0]] ([TIME[2010-09-03 10:10:02 +09:00]] 版) ]REFS] [47] [[XBL2]] は[[影木]]との関係を規定していました。