概要
私がCSSをいじっていた時代には結合子はこんなになかったと思うけれど、知らないのがあったのでまとめてみた。CSS level 2の頃まで結合子込みでセレクタのひとつとされていたようだ。それがCSS3からコンビネータ・結合子と呼ばれるようになったのでネットの記事でもなんちゃらセレクタともなんちゃら結合子とも呼ばれているらしい。
種類
CSS 2
- Descendant selectors (” “) 子孫セレクタ
- Child selectors (“>”) 子セレクタ
- Adjacent sibling selectors (“+”) 隣接兄弟セレクタ
CSS 3
- Descendant combinator (” “) 子孫結合子
- Child combinator (“>”) 子結合子
- Next-sibling combinator (“+”) 次兄弟結合子
- Subsequent-sibling combinator (“~”) 後続兄弟結合子
CSS 4
- Column combinator (“||”) 列結合子
Descendant selectors (” “) 子孫結合子
この結合子は指定した親要素の直系の子孫要素を選択する。
ex:
.parent p{
color: red;
}<div class="parent">
<p class="child">
指定の親子なのでここは赤い
</p>
<div class="child">
<p class="grandson">
孫にも継承されて赤い
</p>
</div>
</div>
<div class="ancle">
<p class="child">
親が違うのでここは赤くない
</p>
</div>Child selectors (“>”) 子結合子
この結合子は指定した親要素の直属の子要素のみを選択する。 ex:
.parent>p{
color: red;
}<div class="parent">
<p class="child">
指定の親子なのでここは赤い
</p>
<div class="child">
<p class="grandchild">
孫には継承されないので赤くない
</p>
</div>
<p class="child">
何番目でも赤い
</p>
</div>
<div class="ancle">
<p class="child">
親が違うのでここは赤くない
</p>
</div>Next-sibling combinator (“+”) 次兄弟結合子
この結合子は指定した要素の次の兄弟要素のみを選択する。
ex:
.eldest+p{
color: red;
}<p class="eldest">
長男は赤くない
</p>
<p>
次男は赤い
</p>
<p>
三男は赤くない
</p>Subsequent-sibling combinator (“~”) 後続兄弟結合子
この結合子は指定した要素の次以降の兄弟要素すべてを選択する。
ex:
.eldest~p{
color: red;
}<p class="eldest">
長男は赤くない
</p>
<p>
次男は赤い
</p>
<p>
三男も赤い
</p>
<p>
ずっと赤い
</p>Column combinator (“||”) 列結合子
この結合子はちょっと趣が変わってテーブル内の列をまるっと指定するらしい。でも今のところ手元のブラウザが対応していないようなので割愛。
参考サイト
- Selectors Level 4 §15. Combinators https://www.w3.org/TR/selectors/#combinators
コメント