【JavaScript】document.querySelectorで使えるCSSセレクターの書き方チートシート

　JavaScriptでDOM要素を取得する際、現代の開発において主役となるのが document.querySelector() です。このメソッドの最大の強みは、CSSと全く同じ記法（セレクター）を使って、柔軟かつピンポイントに要素を狙い撃ちできる点にあります。

この記事では、querySelector（および querySelectorAll）の引数として渡す「セレクターの書き方」をパターン別に網羅しました。

1. 基本のセレクター
2. 属性による指定（属性セレクター）
3. 階層・関係性による指定（結合子）
4. 状態や順番による指定（疑似クラス）
5. 複数の条件を組み合わせる（マルチセレクター）

1. 基本のセレクター

まずは最も頻繁に使用する、タグ・ID・クラスによる指定です。

種類	記号	記述例	対象となる要素
要素（タグ）	(なし)	`querySelector('div')`	最初の `<div>` 要素
ID	`#`	`querySelector('#app')`	`id="app"` を持つ要素
クラス	`.`	`querySelector('.btn')`	`class="btn"` を持つ最初の要素

JavaScript

// 【実例】
const header = document.querySelector('header');
const mainTitle = document.querySelector('#title');
const submitButton = document.querySelector('.submit-btn');

// 【実例】
const header = document.querySelector('header');
const mainTitle = document.querySelector('#title');
const submitButton = document.querySelector('.submit-btn');

2. 属性による指定（属性セレクター）

特定の属性（type や href、カスタムデータ属性の data-* など）を持つ要素を取得します。フォーム要素の取得などで非常に重宝します。

条件	記述例	対象となる要素
属性を持つ	`[disabled]`	`disabled` 属性を持つ要素
値が完全一致	`[type="text"]`	`type` が `text` の要素
値で始まる	`[href^="https"]`	`href` が `https` で始まる要素
値で終わる	`[src$=".png"]`	`src` が `.png` で終わる要素
値を含む	`[class*="icon-"]`	クラス名に `icon-` を含む要素

JavaScript

// 【実例】チェックボックスを取得
const checkbox = document.querySelector('input[type="checkbox"]');

// 【実例】特定のデータ属性を持つ要素を取得
const activeTab = document.querySelector('[data-status="active"]');

// 【実例】チェックボックスを取得
const checkbox = document.querySelector('input[type="checkbox"]');

// 【実例】特定のデータ属性を持つ要素を取得
const activeTab = document.querySelector('[data-status="active"]');

3. 階層・関係性による指定（結合子）

親要素、子要素、兄弟要素といったHTMLの構造に基づいた指定方法です。複雑なHTML構造の中から目的の要素を絞り込む際に使用します。

種類	記号	記述例	対象となる要素
子孫（配下すべて）	(空白)	`ul li`	`<ul>` の中にあるすべての `<li>`
子（直下のみ）	`>`	`ul > li`	`<ul>` の直下にある `<li>` のみ
隣接する兄弟	`+`	`h2 + p`	`<h2>` の直後に現れる `<p>`
後続の兄弟	`~`	`h2 ~ p`	`<h2>` より後にある同じ階層の `<p>`

JavaScript

// 【実例】特定のクラスの中にあるリンクを取得
const navLink = document.querySelector('.nav-menu > li > a');

// 【実例】特定のクラスの中にあるリンクを取得
const navLink = document.querySelector('.nav-menu > li > a');

4. 状態や順番による指定（疑似クラス）

要素の順番や、チェック状態などの動的な状態を基準にして取得します。特に querySelectorAll と組み合わせて順番で絞り込む際によく使われます。

種類	記述例	対象となる要素
最初の子要素	`li:first-child`	兄弟要素の中で最初の `<li>`
最後の子要素	`li:last-child`	兄弟要素の中で最後の `<li>`
N番目の子要素	`li:nth-child(3)`	兄弟要素の中で3番目の `<li>`
否定（〜以外）	`div:not(.hidden)`	`hidden` クラスを持たない `<div>`
チェック済み	`input:checked`	チェックが入っているラジオボタンやチェックボックス

JavaScript

// 【実例】リストの2番目の要素を取得
const secondItem = document.querySelector('.list-item:nth-child(2)');

// 【実例】非表示になっていないエラーメッセージを取得
const visibleError = document.querySelector('.error-msg:not(.is-hidden)');

// 【実例】リストの2番目の要素を取得
const secondItem = document.querySelector('.list-item:nth-child(2)');

// 【実例】非表示になっていないエラーメッセージを取得
const visibleError = document.querySelector('.error-msg:not(.is-hidden)');

5. 複数の条件を組み合わせる（マルチセレクター）

複数のセレクターをカンマ , で区切ることで、「A または B」という条件で一括取得することができます。（主に querySelectorAll で活用します）

JavaScript

// h1、h2、h3のいずれかに該当する要素をすべて取得
const headings = document.querySelectorAll('h1, h2, h3');

// .btn-primary または .btn-secondary をすべて取得
const buttons = document.querySelectorAll('.btn-primary, .btn-secondary');

// h1、h2、h3のいずれかに該当する要素をすべて取得
const headings = document.querySelectorAll('h1, h2, h3');

// .btn-primary または .btn-secondary をすべて取得
const buttons = document.querySelectorAll('.btn-primary, .btn-secondary');