セレクター
CSS
CSSセレクターの種類と優先度
基本セレクター
要素、クラス、ID、属性セレクター
/* 要素セレクター */
p { color: gray; }
/* クラスセレクター */
.card { padding: 1rem; }
/* IDセレクター */
#header { height: 60px; }
/* 複数セレクター */
h1, h2, h3 { font-weight: bold; }
/* 子孫セレクター */
.nav a { text-decoration: none; }
/* 直接の子セレクター */
.list > li { list-style: none; }
/* 隣接兄弟セレクター */
h2 + p { margin-top: 0; }
/* 一般兄弟セレクター */
h2 ~ p { color: var(--text-secondary); }属性セレクター
HTML属性を条件にセレクトする
/* 属性の存在 */
[disabled] { opacity: 0.5; }
/* 完全一致 */
[type="text"] { border: 1px solid #ccc; }
/* 部分一致（語を含む） */
[class~="active"] { color: green; }
/* 前方一致 */
[href^="https"] { color: green; }
/* 後方一致 */
[href$=".pdf"]::after { content: " (PDF)"; }
/* 部分文字列を含む */
[href*="github"] { font-weight: bold; }
/* 大文字小文字を無視 */
[type="email" i] { text-transform: lowercase; }擬似クラス
:hover、:focus、:nth-child など
状態系
/* ユーザーアクション */
a:hover { color: blue; }
a:focus { outline: 2px solid blue; }
a:active { opacity: 0.8; }
a:visited { color: purple; }
/* フォーム状態 */
input:focus-visible { outline: 2px solid #4f46e5; outline-offset: 2px; }
input:invalid { border-color: red; }
input:valid { border-color: green; }
input:disabled { background: #f3f4f6; cursor: not-allowed; }
input:checked + label { font-weight: bold; }
input:placeholder-shown { background: lightyellow; }
/* リンク状態の推奨順序（LoVe HAte）*/
a:link, a:visited, a:hover, a:active { }構造系
/* 子要素の位置 */
li:first-child { margin-top: 0; }
li:last-child { margin-bottom: 0; }
li:nth-child(2) { color: red; } /* 2番目 */
li:nth-child(odd) { background: #f9f9f9; } /* 奇数 */
li:nth-child(even) { background: white; } /* 偶数 */
li:nth-child(3n+1) { font-weight: bold; } /* 1,4,7... */
/* 型ベース */
p:first-of-type { font-size: 1.1em; }
p:last-of-type { margin-bottom: 0; }
p:only-of-type { text-align: center; }
/* その他 */
:not(.disabled) { cursor: pointer; }
:is(h1, h2, h3) { line-height: 1.2; } /* 複数セレクター短縮 */
:where(h1, h2, h3){ margin-top: 2rem; } /* 詳細度0 */
:has(img) { padding: 0; } /* 親セレクター */擬似要素
::before、::after、::placeholder など
/* コンテンツの前後に挿入 */
.card::before {
content: "";
display: block;
width: 100%;
height: 4px;
background: linear-gradient(to right, #10b981, #14b8a6);
}
.required::after {
content: " *";
color: red;
}
/* テキスト装飾 */
p::first-line { font-weight: bold; }
p::first-letter { font-size: 2em; float: left; margin-right: .1em; }
/* 選択時のスタイル */
::selection {
background: #10b981;
color: white;
}
/* プレースホルダー */
input::placeholder { color: #9ca3af; font-style: italic; }
/* スクロールバー */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #10b981; border-radius: 4px; }詳細度（Specificity）
セレクターの優先度計算
/*
詳細度の計算（高い順）:
!important → 最優先（使用は最小限に）
style="..." → インラインスタイル (1,0,0,0)
#id → (0,1,0,0)
.class :pseudo-class → (0,0,1,0)
[attr] ::pseudo-element→ (0,0,1,0)
element → (0,0,0,1)
* → (0,0,0,0)
*/
/* 例 */
#nav .item a:hover { } /* 0,1,1,1 */
.container > p { } /* 0,0,1,1 */
h1 { } /* 0,0,0,1 */
/* :is() と :not() は内部の最高詳細度を継承 */
:is(#id, .class) p { } /* 0,1,0,1 — #id の詳細度 */
/* :where() は詳細度 0 */
:where(#id, .class) p { } /* 0,0,0,1 */