女性向けエンジニアスクール
3秒でわかる
HTMLの中から対象の要素を選び出す記法。CSSの装飾もJavaScriptからの取得も、同じ書式で対象を絞り込めます。
もう少し詳しく
どういうものか
セレクタは、HTML文書の中から特定の要素を選び出すための記法です。p のようなタグ名、.card のようなクラス、#header のようなid、[type="text"] のような属性、疑似クラスによる状態や位置の指定を、組み合わせて書きます。CSSでは装飾の対象を、JavaScriptでは操作の対象を、同じ書式で指定できます。
なぜ必要か
HTMLは要素が入れ子になった木構造です。その中から「カードの中の見出しだけ」を狙って選ぶ手段が無いと、装飾も操作もできません。セレクタは、構造の中の位置と特徴を条件式として書ける仕組みで、HTML側に印を足さなくても対象を絞り込めます。
具体例
.card h2 { font-size: 1.25rem; } /* .card の子孫の h2 */
.card > p { margin: 0; } /* 直下の p だけ */
a[target="_blank"] { text-decoration: underline; }
li:nth-child(odd) { background: #f6f6f6; }
button:disabled { opacity: 0.5; }// 同じ書式で JavaScript からも取得できる
const first = document.querySelector(".card h2");
const all = document.querySelectorAll("input[required]");
all.forEach((el) => el.<a href="/glossary/classlist" class="text-primary font-medium underline underline-offset-2 hover:text-primary-dark">classList</a>.add("mark"));つまずきやすいところ
意図した装飾が効かない原因の多くは詳細度です。id指定はクラス指定より強く、クラス指定はタグ指定より強いため、あとから書いたルールでも負けることがあります。勝てないからと !important を足すと、次に直す人がさらに強い指定を足す悪循環になります。詳細度をそろえ、クラス中心で書くのが現実的です。
もうひとつは querySelectorAll の戻り値です。配列に似ていますがNodeListなので、map や filter はそのままでは使えません。配列として扱いたいときは Array.from で変換します。
覚え方
先頭の記号で読み分けられます。ドットはクラス、シャープはid、記号なしはタグ、角かっこは属性、コロン1つは状態です。
書き方に迷ったら、開発者ツールで要素を右クリックしてセレクタをコピーできます。ただし自動生成されるものは長く壊れやすいため、そのまま使わず意味のあるクラス名へ置き換えます。
