属性セレクタ
属性セレクタは、要素の属性に基づいてスタイルを適用します。例えば、特定の属性を持つ要素や、属性値が特定の値に一致する要素を選択できます。
<style>
input[readonly] {
background-color: lightgray;
}
textarea[placeholder="検索"] {
background-color: lightblue;
}
</style>
<body>
<div>
<input type="text" value="読み取り専用" readonly>
<input type="text" placeholder="通常のテキストボックス">
<textarea placeholder="検索"></textarea>
</div>
</body>
構造擬似クラスセレクタ
構造擬似クラスセレクタは、親要素内の子要素の位置に基づいてスタイルを適用します。特に :nth-child(n) は、親要素内の n 番目の子要素を選択するために使用されます。
n には数値、キーワード (even: 偶数, odd: 奇数)、または式を指定できます。式の場合、n は 0 から計算されます。
:nth-child() と :nth-of-type() の違い
両者とも親要素の子要素を指定しますが、動作が異なります。
<style>
/* div 内の3番目の子要素で、かつ span 要素であるもの */
div span:nth-child(3) {
background-color: pink;
}
/* div 内の span 要素の中で2番目のもの */
div span:nth-of-type(2) {
background-color: yellow;
}
</style>
<div>
<span>span1</span>
<div>div要素</div>
<span>span2</span>
</div>
nth-child(3) は、div の3番目の子要素が span である場合にのみ適用されます。この例では3番目の子要素は div 要素なので、スタイルは適用されません。一方、nth-of-type(2) は、span 要素の中で2番目のものを選択するため、スタイルが適用されます。
擬似要素セレクタ
擬似要素セレクタは、要素の前後にコンテンツを挿入するために使用されます。::before と ::after が一般的です。
これらは、content プロパティを必須とし、要素の前後にインライン要素としてコンテンツを挿入します。これらの要素は DOM には存在しないため「擬似要素」と呼ばれます。
<style>
blockquote::before {
content: "「";
color: red;
}
blockquote::after {
content: "」";
color: blue;
}
</style>
<body>
<blockquote>これは引用文です。</blockquote>
</body>