CSSセレクタのブラウザ挙動/実装演習

この単元で学ぶこと

• HTML断片から一致要素を列挙できる
• 属性一致とclassトークン一致を区別できる
• 構造疑似クラスの数え方を適用できる

本文解説

共通DOM 「<section><p class="note">A</p><div><p class="note">B</p></div><p>C</p></section>」を考えます。sectionの直接の子はp(A)、div、p(C)です。p(B)はdivの子で、sectionの孫に当たります。

子孫と子の答え section pはA・B・Cの三つ、section > pはA・Cの二つです。section .noteはA・B、section > .noteはAだけ。一致対象は最後の単純セレクタで示す要素であり、祖先sectionそのものを数えません。

同一要素の条件 「<p class="note hot">A</p><p class="note">B</p><div class="hot">C</div>」で.note.hotはAのみ。空白を入れた.note .hotはnote要素の子孫hotを要求するので、この断片ではゼロです。

兄弟の演習 「<h2>見出し</h2><p>A</p><div></div><p>B</p>」が同一親の子ならh2+pはAだけ、h2~pはA・Bです。p+pは前のpの直後に別のpがないためゼロ。HTML中の改行・空白テキストはこの要素兄弟の隣接を妨げません。

属性の三種類 class="note hot"へ.noteは一致しますが[class="note"]は不一致。[class~="note"]なら空白区切りトークンのnoteを探すので一致します。[href^="https:"]は先頭一致、[href$=".pdf"]は末尾一致で、値全体一致とは別です。

位置の数え方 「<div><h2>T</h2><p>A</p><p>B</p></div>」ではp:first-childはゼロ、p:first-of-typeはA。p:nth-child(2)もAです。nth-childは同じ親の要素子全体で1から数えます。テキストノードを一要素として数えません。

否定条件 「button:not([disabled])」はdisabled属性がないbuttonを選びます。これはそのボタンが全ての条件で操作可能と保証するものではありません。親fieldsetの状態などHTMLの機能的な無効状態と、属性の有無は常に同じとは限りません。

確認方法 通常の要素セレクタなら開発者ツールやdocument.querySelectorAllで一致集合を調べられます。ただし::beforeなど疑似要素は通常のDOM要素としてquerySelectorAllから取得できません。スタイルが見えないときは、一致しないのかカスケードで負けたのかを分けて調べます。

図解

重要ポイント

• section pは三つ、section>pは二つ。
• 複合classは同じ要素、空白は子孫関係。
• nth-childは要素子全体を1から数える。

間違えやすい点

• HTMLの空白文字を要素の一番目と数えない。
• [class="note"]と.noteを同一視しない。
• 属性なしと機能上の有効状態を無条件に同一視しない。

用語解説

複合セレクタ

同じ要素に対する複数条件を結合したもの。

nth-child

同じ親の要素子の中で指定された位置に一致する疑似クラス。

属性トークン一致

[attr~="value"]で空白区切りの単語として値があるか調べること。

関連教材

• カスケードと詳細度を理解する
• CSSセレクタを理解する
• カスケードと詳細度のブラウザ挙動/実装演習
• ボックスモデルを理解する