コンビネータと聞いてピンときた人は読まなくても良い記事です！
ただ、今回私が初めて知った**「Column combinator」と「Namespace separator」**についても紹介しているので気になる方はそちらから読んでください！
ページ内リンクの設置
普段「コンビネータ」というワードを用いて会話はしないので、恥ずかしながら調べ直すまで「？」な状態でした…
ドキュメントを読んでいると時折出てくるコンビネータについて調べたら発見もあったので記事にしました！
コンビネータってなに？
カタカナで表現されると「ん？」となりますが、結合子のことです！
皆さんもよくお世話になっているであろうCSSのセレクタの子要素にスタイルを適用する時に使う>などです！
コンビネータの種類
MDNだと7つがコンビネータとして定義されています。
- Child combinator
- Column combinator
- Namespace separator
- Next-sibling combinator
- Selector list
- Subsequent-sibling combinator
普段と表現が異なるとなんやそれ？ってなりますが、ほとんどは慣れ親しんだコンビネータです！
| combinator | セレクタの指定方法 | 補足 |
|---|---|---|
| Child combinator | div > p | 直接の子要素指定 |
| Next-sibling combinator | div + p | 同じ親の子である場合の次の要素を指定 |
| Selector list | div, p, img | （,）カンマで区切られたセレクターのリスト |
| Subsequent-sibling combinator | div ~ p | ~（チルダ）で同じ親要素かつ、1つ目のセレクタの後続要素に対しての指定 |
今回調べて知らなかった「Column combinator」と「Namespace separator」について紹介します！
Column combinator
||でセレクターを区切ります。
1つ目のセレクターでターゲットの列要素を指定し、2つ目のセレクターで要素を指定します。
column-selector || cell-selector {}
なのでtableタグで利用できるセレクターのようです！
下記のコードはMDNに掲載されていたものです。
col.selected||td {
background: gray;
color: white;
font-weight: bold;
}
<table border="1">
<colgroup>
<col span="2" />
<col class="selected" />
</colgroup>
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td colspan="2">D</td>
<td>E</td>
</tr>
<tr>
<td>F</td>
<td colspan="2">G</td>
</tr>
</tbody>
</table>
ブラウザで表示の確認方法がわからなかった（そもそも現時点ではできないかも）のでおそらく下記のような見た目になるのではないかと思います。
col.selected {
background: gray;
color: white;
font-weight: bold;
}
「Column combinator」は上記のセレクタに追加の条件としてtdであることを追加しているのでMDNのサンプルコードだと画像と同じ表示になるのではないかと予測されます。
こちらはまだ実験的だそうで、今後はどうなるかわかない状態であることを誤認識ください…
現時点でブラウザ互換はなさそうです…。
Namespace separator
名前空間を指定することで指定した名前空間内の要素に対してスタイルを当てられます。
名前空間 | セレクタの形式で記述します。
/* myNameSpaceの名前空間内にあるaタグに対してスタイルを適用します */
myNameSpace|a {
font-weight: bold;
}
/* 全てのpタグに対してスタイルを適用します */
*|p {
color: darkblue;
}
/* ネームスペースがないh2タグに対してスタイルを適用します */
|h2 {
margin-bottom: 0;
}
デフォルトでは、HTML または SVG 要素内のすべての要素には、
http://www.w3.org/1999/xhtmlおよびhttp://www.w3.org/2000/svg名前空間が暗黙的に指定されている
どんな要素に対しても暗黙的にネームスペースが割り当てられるそうです。
つまり、要素は必ずどこか1つのネームスペース内に存在しているということになります。
もしもネームスペースがない要素を作りたい場合は、
document.createElementNS名前空間パラメータに空の文字列を指定したメソッドを使用することで作成できるとのことです。
const a = document.createElementNS('', 'a');
スタイルの適用についてMDNに記述されたサンプルコードで説明します。
<p>This paragraph <a href="#">has a link</a>.</p>
<svg width="400" viewBox="0 0 400 20">
<a href="#">
<text x="0" y="15">Link created in SVG</text>
</a>
</svg>
/* svgとxhtmlに対してnamespaceを設定しています */
@namespace svgNamespace url("http://www.w3.org/2000/svg");
@namespace htmlNameSpace url("http://www.w3.org/1999/xhtml");
/* グローバルなセレクタ */
a {
font-size: 1.4rem;
}
/*
namespaceのないaタグに適用するスタイル
今回はnamespaceのない要素は定義されていないのでどの要素にもスタイルは適用されません
*/
|a {
text-decoration: wavy overline lime;
font-weight: bold;
}
/* 全てのnamespaceのaタグに対してスタイルが適用されます */
*|a {
color: red;
fill: red;
font-style: italic;
}
/* 下記2つは、先ほど定義したSVGのネームスペースに対してスタイルが適用されます */
svgNamespace|a {
color: green;
fill: green;
}
htmlNameSpace|a {
text-decoration-line: line-through;
}
スタイルが適用された結果HTMLは下記のようになります。
上記のCSSから分かる通り、namespaceを利用してスタイルを定義する場合CSSのカスケードは適用されないようです。
もし適用されるなら、svgNamespace|aの後に定義した、htmlNameSpace|aはHTML全体に対してスタイルを適用するセレクタのはずなので、「Link created in SVG」にも取り消し戦が適用されるはずだからです。
まとめ
改めてMDNなどのドキュメントに定義されているような用語は理解しておかないとドキュメントを読む際の障害になると感じました…。
全てを把握し切るのは難しくても頻度の高い単語はしっかり覚えていきたいと思います！