[2] 一般兄弟結合子general sibling combinator (~) は、 前の単純選択子列によって表される要素の弟である、 後の単純選択子列によって表される要素を表す兄弟結合子です。

仕様書

意味

[3] 一般兄弟結合子は、前後2つの単純選択子列で表される要素が同じ親を持ち、 最初の要素の後に2つ目の要素があることを表しています。 >>1 隣接兄弟結合子とは違って、直後にある必要はありません。

[5] 文書木は実体参照を展開した状態で表現されるので、「同じ親」の判定は実体参照節点を無視して行われます。

構文

[6] 一般兄弟結合子の前後には空白を挿入できます。

歴史

/ ... /

  • [9] STSS 2 (Daniel Glazman 著, 版) http://www.w3.org/TR/NOTE-stts2-971017#Sequential
  • [19] Selectors ( 版) http://www.w3.org/TR/WD-CSS2-971104/selector.html#sequential-selectors

[8] STTS2 や初期の CSS2 では DIV /IMG UL/ のような構文が提案されていました。

[10] DIV /IMG ~ UL/ は隣接兄弟結合子の意味なので、現在と ~ の意味が逆転しています。

-

  • [12] STSS 3 ( 版) http://www.w3.org/TR/1998/NOTE-STTS3-19981111#Adjacent

[13] STTS3 では一般兄弟結合子は - で表していました。 (間接隣接結合子indirect adjacent combinatorと呼ばれていました。)

~

  • [14] CSS3 module: W3C selectors ( 版) http://www.w3.org/TR/1999/WD-CSS3-selectors-19990803#adjacent-i-combinators

[11] 選択子3の最初の公開案 >>14 で ~ が間接隣接結合子として追加されました。

  • [17] Selectors ( 版) http://www.w3.org/TR/2005/WD-css3-selectors-20051215/#sibling-combinators

[18] >>17 で名称が変更されて、一般兄弟結合子となりました。

XBL2

  • [15] XBL 2.0 ( 版) http://dev.w3.org/2006/xbl2/Overview.html#selectors-and-shadow-scopes

[16] XBL2 は影木との関係を規定していました。

例

[7] 選択子 h1 ~ em は h1 要素の弟要素である em 要素を表します。間に他の要素やテキストや注釈が挟まっていても構いません。

[4] 本当は恐ろしい「~」記号 - IT翻訳者Blog () https://blog.nishinos.com/archives/5806116.html