Edit

Page

Page title:

Page body:

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

* 仕様書

[REFS[
- [1] [CITE@en[Selectors Level 3]] ([TIME[2011-09-29 22:16:17 +09:00]] 版) <http://www.w3.org/TR/selectors/#adjacent-sibling-combinators>
]REFS]

* 意味

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

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

* 構文

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

* 歴史

** [CODE(CSS)@en[/ ... /]]

[REFS[
- [9] [CITE[STSS 2]] ([[Daniel Glazman]] 著, [TIME[2000-09-09 01:13:50 +09:00]] 版) <http://www.w3.org/TR/NOTE-stts2-971017#Sequential>
- [19] [CITE@en[Selectors]] ([TIME[1997-11-08 03:00:17 +09:00]] 版) <http://www.w3.org/TR/WD-CSS2-971104/selector.html#sequential-selectors>
]REFS]

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

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

** [CODE(CSS)[-]]

[REFS[
- [12] [CITE[STSS 3]] ([TIME[2000-03-13 23:38:54 +09:00]] 版) <http://www.w3.org/TR/1998/NOTE-STTS3-19981111#Adjacent>
]REFS]

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

** [CODE(CSS)[~]]

[REFS[
- [14] [CITE[CSS3 module: W3C selectors]] ([TIME[2000-03-13 23:37:32 +09:00]] 版) <http://www.w3.org/TR/1999/WD-CSS3-selectors-19990803#adjacent-i-combinators>
]REFS]

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

[REFS[
- [17] [CITE@en[Selectors]] ([TIME[2005-12-15 00:49:29 +09:00]] 版) <http://www.w3.org/TR/2005/WD-css3-selectors-20051215/#sibling-combinators>
]REFS]

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

** XBL2

[REFS[
- [15] [CITE@en-US[XBL 2.0]] ([TIME[2010-09-03 10:10:02 +09:00]] 版) <http://dev.w3.org/2006/xbl2/Overview.html#selectors-and-shadow-scopes>
]REFS]

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

* 例

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

[4] [CITE@ja[本当は恐ろしい「~」記号 - IT翻訳者Blog]]
([TIME[2021-07-04T03:19:17.000Z]])
<https://blog.nishinos.com/archives/5806116.html>

Historical Legal Sensitive Parent: [Help / License]

Edit

Page

Page name(s)