CSSセレクタ完全ガイド 2025年版

/* href が "https" で始まるリンク */
a[href^="https"] { }

/* href が ".pdf" で終わるリンク */
a[href$=".pdf"] { }

/* href に "example" を含むリンク */
a[href*="example"] { }

/* lang が "en" または "en-US", "en-GB" などにマッチ */
[lang|="en"] { }

/* iフラグ: 大文字小文字を区別しない */
a[href$=".pdf" i] {
  /* .pdf, .PDF, .Pdf などすべてマッチ */
}

/* sフラグ: 大文字小文字を区別する */
a[href$=".pdf" s] {
  /* ".pdf"のみマッチ、".PDF"などはマッチしない */
}

<div>
  <h2>見出し</h2>
  <p>テキスト1</p>
  <p>テキスト2</p>
  <p>テキスト3</p>
</div>

/* h2 より後ろにあるすべての p（テキスト1, 2, 3すべて） */
h2 ~ p { color: blue; }

/* h2 の直後の p のみ（テキスト1だけ） */
h2 + p { text-decoration: line-through; }

/* ulまたはolを含むul */
ul:has(ul, ol) {}

/* 直下の子要素に hogeクラスを持つ要素があるdiv */
div:has(> .hoge) {}

/* 従来の書き方 */
header ul,
header ol,
footer ul,
footer ol {
}

input:focus,
textarea:focus,
select:focus {
}

/* :is()を使った書き方 */
:is(header, footer) :is(ul, ol) {
}

:is(input, textarea, select):focus {
}

/* :is()は最も高い詳細度(#idの詳細度)を持つ */
:is(#id, .class, div) { }

/* :where()は常に詳細度0 */
:where(#id, .class, div) { }

/* 3番目の子要素 */
li:nth-child(3) { }

/* 奇数番目（1, 3, 5...）*/
li:nth-child(odd) { }

/* 偶数番目（2, 4, 6...）*/
li:nth-child(even) { }

/* 3の倍数番目（3, 6, 9...）*/
li:nth-child(3n) { }

/* 3番目以降（3, 4, 5...）*/
li:nth-child(n + 3) { }

/* 最初の3つだけ（1, 2, 3）*/
li:nth-child(-n + 3) { }

<div>
  <h2>親から見て1番目 / h2タグ</h2>
  <p>親から見て2番目 / pタグの中で1番目</p>
  <p>親から見て3番目 / pタグの中で2番目</p>
</div>

/* 親から見て2番目で、かつ p タグなら赤色に */
p:nth-child(2) { color: blue; }

/* pタグの中で2番目のものを緑色に */
p:nth-of-type(2) { color: green; }

/* p タグの中で最初のものなら打ち消し線をつける */
p:first-of-type { text-decoration: line-through; }

<ul>
  <li>リスト1</li>
  <li class="item">リスト2</li>
  <li class="item">リスト3</li>
</ul>

/* .item の中で2番目 → "リスト3" が該当 */
li:nth-child(2 of .item) {color: green;}

/* :invalid は初期状態から赤くなってしまうことがある */
input:invalid {
  border-color: red;
}

/* :user-invalid はユーザーが操作した後だけ赤くなる */
input:user-invalid {
  border-color: red;
}