[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] [57] どの[[Webブラウザー]]も[[小数]]は使えません。 [TIME[2011-10-30T10:19:08.0Z]] [REFS[ - [58] ]REFS] [59] [CODE(CSS)@en[[[n]]]] は[[ASCII大文字・小文字不区別]]です。 [60] [CODE(CSS)@en[[[n]]]] は [[escape]] であっても構いません。 [63] >>60 は [[Firefox]] は対応していますが、 [[Chrome]] と [[Opera]] は対応していません。 [TIME[2011-10-30T10:32:46.100Z]] [REFS[ - [62] - [61] ]REFS] ** [CODE(CSS)@en[even]] と [CODE(CSS)@en[odd]] [15] [DFN[[CODE(CSS)@en[[[even]]]]]] は [CODE(CSS)@en[[[2n]]]] と同じです [SRC[>>1 6.6.5.2.]]。 [[偶数]]番目を表します。 [16] [DFN[[CODE(CSS)@en[[[odd]]]]]] は [CODE(CSS)@en[[[2n+1]]]] と同じです [SRC[>>1 6.6.5.2.]]。 [[奇数]]番目を表します。 [66] [[ASCII大文字・小文字不区別]]です。 [65] [[Firefox]] と [[Chrome]] は [[escape]] に対応しています。 しかし [[Opera]] は対応していません。 [TIME[2011-10-30T10:34:22.800Z]] [REFS[ - [64] ]REFS] [67] [[Firefox]] と [[Opera]] は [CODE(CSS)@en[2n]], [CODE(CSS)@en[2n+1]] に[[正規化]]しているようですが、 [[Chrome]] は [CODE(CSS)@en[[[even]]]], [CODE(CSS)@en[[[odd]]]] までしか[[正規化]]しないようです。 ([CODE(CSS)@en[2n]] は [CODE(CSS)@en[2n]] のままです。) [TIME[2011-10-30T10:35:55.700Z]] * 構文 [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.]] [51] [[Firefox]] と [[Opera]]、 [[Chrome]] は >>28、>>29 の通りに実装しています。 [TIME[2011-10-30T10:14:28.000Z]] [52] [[Chrome]] は >>28 の[[空白]]の箇所に[[注釈]]を入れることに対応していません。 [[Firefox]] と [[Opera]] は対応しています。 [TIME[2011-10-30T10:14:49.700Z]] [REFS[ - [53] ]REFS] [54] [[Opera]] は1つ目の[[項]] (または唯一の[[項]]) の[[符号]]と[[数字]]の間に[[注釈]]を認めていますが、 [[Firefox]] と [[Chrome]] は認めていません。 [TIME[2011-10-30T10:16:23.300Z]] [REFS[ - [55] - [56] ]REFS] * 大文字と小文字 [12] [[擬似クラス]]の種類を表す部分も引数も[[ASCII大文字・小文字不区別]]です。 * 歴史 ** [CODE(CSS)[// ... /]], [CODE(CSS)[/ ... //]], [CODE(CSS)[// ... //]] [REFS[ - [34] [CITE[STSS 2]] ([[Daniel Glazman]] 著, [TIME[2000-09-09 01:13:50 +09:00]] 版) - [48] [CITE@en[Selectors]] ([TIME[1997-11-08 03:00:17 +09:00]] 版) ]REFS] [35] [[STTS2]] や [[CSS2]] の初期案では [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)[/.../]] は[[兄弟結合子]]の意味でした。 ** [CODE(CSS)@en[:first-child]] [REFS[ - [49] [CITE@en[Selectors]] ([TIME[2001-01-16 00:22:58 +09:00]] 版) - [31] [CITE@en[Selectors]] ([TIME[2011-06-07 22:09:52 +09:00]] 版) ]REFS] [32] >>48 の次の [[WD]] である >>49 で旧構文は削除され、かわりに [CODE(CSS)@en[[[:first-child]]]] が追加されました。 ;; [50] [CODE(CSS)@en[[[:last-child]]]] や [CODE(CSS)@en[[[:only-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]] は[[影木]]の影響を受けないと規定していました。