8個のプロパティ
要素にマウスカーソルが乗ったときに適用される擬似クラスです。ボタンやリンクのホバー効果などでよく使われます。
button:hover { background-color: blue; }親要素内での順序に基づいて要素を選択できる擬似クラスです。リストやグリッドの偶数・奇数行、特定のパターンにスタイルを適用する際に便利です。
li:nth-child(2n) {
background: #f3f4f6;
}同じタグ名の要素の中での順序に基づいて要素を選択する擬似クラスです。:nth-child()との違いは、タグ名を考慮することです。見出しやセクション要素に特に有用です。
h2:nth-of-type(2n) {
color: #3b82f6;
}親要素の最初の子要素を選択する擬似クラスです。リストの最初の項目や、カードレイアウトの最初の要素など、特定の位置にある要素にスタイルを適用する際に便利です。
li:first-child {
border-top: 2px solid #3b82f6;
font-weight: bold;
}要素がキーボードからフォーカスされた場合にのみ適用される擬似クラスです。マウスクリックによるフォーカスには適用されないため、アクセシビリティを向上させながら不要なフォーカスリングを避けられます。
button:focus-visible { outline: 2px solid #3b82f6; }「子や後続の要素が条件を満たす親・前の要素」を選択できる擬似クラスです。長年不可能だった『親セレクタ』を実現し、JavaScriptなしで子の状態に応じた親のスタイリングができます。
/* 画像を含むカードだけレイアウトを変える */
.card:has(img) {
display: grid;
grid-template-columns: 120px 1fr;
}ユーザーが実際に操作した後にのみ、フォーム入力の検証結果に応じてスタイルを適用する擬似クラスです。:invalidと違いページ表示直後の未入力フォームが赤くならないため、実用的なバリデーション表示がCSSだけで実現できます。
input:user-invalid {
border-color: #dc2626;
background: #fef2f2;
}
input:user-valid {
border-color: #16a34a;
}自分自身または子孫要素にフォーカスがあるときにマッチする擬似クラスです。入力中の検索ボックス全体をハイライトしたり、フォーカスでドロップダウンを開いたりと、「中にフォーカスがある親」の装飾がJavaScriptなしで書けます。
.search-box:focus-within {
border-color: #2563eb;
box-shadow: 0 0 0 3px rgb(37 99 235 / 0.2);
}