CSS选择器测试

ユニバーサルセレクター。ページ内のすべての要素に一致します。

* { margin: 0; }

IDセレクター。指定されたIDを持つ一意の要素に一致します。

#header { color: #111; }

クラスセレクター。指定されたクラスを持つ要素に一致します。

.btn { border-radius: 8px; }

子孫セレクター。A要素内の任意の階層にあるB要素に一致します。

nav a { text-decoration: none; }

子セレクター。A要素の直接の子要素であるB要素のみに一致します。

ul > li { list-style: none; }

隣接兄弟セレクター。A要素の直後に続く最初のB要素に一致します。

h2 + p { margin-top: 0; }

一般兄弟セレクター。A要素の後に続くすべての同じ階層のB要素に一致します。

h2 ~ p { color: #666; }

属性セレクター。指定された属性を持つ要素に一致します。

input[required] { border-color: red; }

属性値セレクター。属性値が指定された内容と等しい要素に一致します。

a[target='_blank'] { color: #2563eb; }

ホバー擬似クラス。マウスオーバー時の要素に一致します。

button:hover { opacity: .9; }

フォーカス擬似クラス。現在フォーカスが当たっている要素に一致します。

input:focus { outline: 2px solid #3b82f6; }

構造的擬似クラス。子要素の順番に基づいて要素に一致します。

li:nth-child(2n) { background: #f8fafc; }

擬似要素。要素の内容の前にスタイル可能なコンテンツを挿入します。

.tag::before { content: '#'; }

擬似要素。要素の内容の後にスタイル可能なコンテンツを挿入します。

.tag::after { content: '✓'; }