CSSセレクタを理解する

CSSのセレクタは、どの要素にスタイルを当てるかを決める条件です。見た目の似た空白・>・+を区別し、HTMLの親子や兄弟関係から対象を読めるようにします。

この単元で学ぶこと

要素・class・id・属性セレクタを区別できる
子孫・子・隣接兄弟の対象を追える
疑似クラスと疑似要素の基本を説明できる

本文解説

セレクタと宣言「p { color: red; }」ではpがセレクタ、color:redが宣言です。pは文書内のp要素を選びます。セレクタが一致しても、他の規則との優先順位により最終表示が変わることがあります。対象選択とカスケードは別段階です。

classとid 「.note」はclassにnoteを含む要素、「#main」はidがmainの要素を選びます。class="note important"なら.noteにも.importantにも一致します。同じclassは複数要素で共有でき、idは文書内で一意にするのがHTMLの規則です。

複合条件と列挙「p.note」はp要素かつnoteクラス。「p .note」はpの内側にあるnoteクラスの子孫で、p自身ではありません。「h1, h2」はh1またはh2の二つの対象をまとめます。空白やカンマ一つで意味が変わります。

子孫と直接の子「article p」はarticleの何段階下でもpを選びます。「article > p」は直接の子のpだけです。article直下にdiv、その中にpがあるなら前者だけに一致。HTMLのインデントではなく実際のDOMの親子関係で判断します。

兄弟関係「h2 + p」は同じ親を持ち、h2の直後の要素がpならそのpを選びます。「h2 ~ p」は同じ親でh2より後にあるpを選び、間に別の要素があっても構いません。両者ともh2自身や親要素を選ぶわけではありません。

属性条件「input[type="email"]」はtype属性値がemailのinputを選びます。「[disabled]」はdisabled属性の存在を条件にします。「a[href^="https:"]」は属性値がhttps:で始まるaを選ぶ例です。classを選ぶドットと属性を囲う角括弧を混同しません。

状態と構造の疑似クラス「button:hover」はポインタが重なる状態、「input:checked」は該当するチェック状態です。「li:first-child」は親の最初の要素子であるliを選び、最初のliという意味とは限りません。「li:first-of-type」は同種liの中で最初かを調べます。

疑似要素「p::first-line」は段落の最初の整形行、「p::before」は要素の手前の生成内容を扱います。疑似クラスが要素の状態などを条件にするのに対し、疑似要素は要素の一部分等を対象にします。::beforeへ文字を表示する例は「p::before { content:"※"; }」です。

図解

重要ポイント

p.noteは同一要素のAND、p .noteは子孫。
空白は子孫、>は直接の子、+は直後の兄弟。
first-childとfirst-of-typeを区別。

間違えやすい点

class属性の全文字列一致と.noteを混同しない。
子孫と直接の子を同じとしない。
セレクタ一致が常に最終スタイル採用を意味すると考えない。

用語解説

子孫結合子: 空白で、祖先と子孫の関係を指定する。
子結合子: >で、直接の親子関係を指定する。
疑似クラス: 状態や構造などによって要素を選択する条件。
疑似要素: 要素の一部や生成内容などを表す対象。

参考資料

教材データに登録された参考リンクです。リンク先の内容や更新日は提供元でご確認ください。

確認問題の出題・採点や学習履歴の保存にはログインが必要です。