Jul. 9th,2021
セレクタの結合子
結合子の詳細
“ ”結合子
概要
2つの合成セレクタを隔てるホワイトスペース(半角スペース(“ ”)、タブ文字など)は“子孫結合子(Descendant combinator)”となります。
子孫結合子で組み合わせられた複合セレクタは1個目の合成セレクタで選択された要素の子孫要素のうちで2個目の合成セレクタで選択されるものを選択します。
サンプルコード
.selected-1 {
background-color: rgba(182,221,123,0.5); /*■*/
}
.selected-1 * {
background-color: rgba(214,131,197,0.5); /*■*/
}
<div class="selected-1">
<p>
平安時代の女流歌人だった彼女は執筆した随筆の中で<span>「猫は上のかぎり黒くてことはみな白き」</span>と記していたという。
</p>
<p>
これが意味するのは<span>猫は背中が黒くてそれ以外は白い猫</span>が優美だということだ。
</p>
</div>
平安時代の女流歌人だった彼女は執筆した随筆の中で「猫は上のかぎり黒くてことはみな白き」と記していたという。
これが意味するのは猫は背中が黒くてそれ以外は白い猫が優美だということだ。
“>”結合子
概要
2つの合成セレクタを隔てる大なり記号(U+003E、“>”)は“子結合子(Child combinator)”となります。
子結合子で組み合わせられた複合セレクタは1個目の合成セレクタで選択された要素の子要素のうちで2個目の合成セレクタで選択されるものを選択します。
サンプルコード
.selected-2 {
background-color: rgba(182,221,123,0.5); /*■*/
}
.selected-2 > * {
background-color: rgba(214,131,197,0.5); /*■*/
}
<div class="selected-2">
<p>
平安時代の女流歌人だった彼女は執筆した随筆の中で<span>「猫は上のかぎり黒くてことはみな白き」</span>と記していたという。
</p>
<p>
これが意味するのは<span>猫は背中が黒くてそれ以外は白い猫</span>が優美だということだ。
</p>
</div>
平安時代の女流歌人だった彼女は長保3年ごろまで執筆していた随筆の中で「猫は上のかぎり黒くてことはみな白き」と記していたという。
これが意味するのは猫は背中が黒くてそれ以外は白い猫が優美だということだ。
“+”結合子
概要
2つの合成セレクタを隔てるプラス記号(U+002B、“+”)は“隣接兄弟結合子(Next-sibling combinator)”となります。
隣接兄弟結合子で組み合わせられた複合セレクタは1個目の合成セレクタで選択された要素の直後に記述された兄弟要素で2個目の合成セレクタで選択されるものを選択します。
サンプルコード
.selected-3 {
background-color: #00a497; /*■*/
}
.selected-3 + * {
background-color: #db7093; /*■*/
}
<ol>
<li>水星</li>
<li>金星</li>
<li class="selected-3">地球</li>
<li>火星</li>
<li>木星</li>
<li>土星</li>
<li>天王星</li>
<li>海王星</li>
</ol>
- 水星
- 金星
- 地球
- 火星
- 木星
- 土星
- 天王星
- 海王星
“~”結合子
概要
2つの合成セレクタを隔てるチルダ(U+007E、“~”)は“後続兄弟結合子(Subsequent-sibling combinator)”となります。
後続兄弟結合子で組み合わせられた複合セレクタは1個目の合成セレクタで選択された要素の後に記述された兄弟要素で2個目の合成セレクタで選択されるものを選択します。
サンプルコード
.selected-4 {
background-color: #00a497; /*■*/
}
.selected-4 ~ * {
background-color: #db7093; /*■*/
}
<ol>
<li>水星</li>
<li>金星</li>
<li class="selected-4">地球</li>
<li>火星</li>
<li>木星</li>
<li>土星</li>
<li>天王星</li>
<li>海王星</li>
</ol>
- 水星
- 金星
- 地球
- 火星
- 木星
- 土星
- 天王星
- 海王星
“||”結合子
概要
2つの合成セレクタを隔てる2個の縦線(“||”)は“列結合子(Column combinator)”となります。
列結合子で組み合わせられた複合セレクタは1個目の合成セレクタで選択された列要素が表す列に含まれるセル要素で2個目の合成セレクタで選択されるものを選択します。
列に含まれる要素は文書の記述言語の定義によって決められます。セル要素が複数の列に属する場合にはいずれの列を選択するセレクタでも選択されます。
サンプルコード
.selected-5 || * {
background-color: #db7093; /*■*/
}
<table>
<colgroup>
<col span="2">
<col class="selected-5">
</colgroup>
<thead>
<tr>
<th>名前</th>
<th>漢字</th>
<th>英語</th>
<th>分類</th>
</tr>
</thead>
<tbody>
<tr>
<td>りんご</td>
<td>林檎</td>
<td>apple</td>
<td>バラ科リンゴ属</td>
</tr>
<tr>
<td>いちご</td>
<td>苺</td>
<td>strawberry</td>
<td>バラ科オランダイチゴ属</td>
</tr>
<tr>
<td>もも</td>
<td>桃</td>
<td>peach</td>
<td>バラ科モモ属</td>
</tr>
</tbody>
</table>
| 名前 | 漢字 | 英語 | 分類 |
|---|---|---|---|
| りんご | 林檎 | apple | バラ科リンゴ属 |
| いちご | 苺 | strawberry | バラ科オランダイチゴ属 |
| もも | 桃 | peach | バラ科モモ属 |
