CSS 疑似クラス
CSSマニュアルCSS疑似クラス (Pseudo-classes) は、要素の特定の状態や特性に対してスタイルを適用するためのセレクターです。
疑似クラスはコロン (:) で始まり、要素名やクラス名の前に付けることで使用できます。
いくつかの代表的な疑似クラスを紹介します。
:hover
要素にマウスオーバーしたときに適用されるスタイルを定義します。
<style>
a:hover {
color: red;
}
</style>
<a href="#">マウスオーバー時に赤色になります</a>:active
要素がアクティブ（クリックされた状態）のときに適用されるスタイルを定義します。
<style>
button:active {
background-color: yellow;
}
</style>
<button>クリック時に背景色が黄色になります</button>:focus
フォーカスが当たっている要素（例: テキスト入力欄やリンクなど）に適用されるスタイルを定義します。
<style>
input:focus {
border-color: blue;
}
</style>
<input type="text" placeholder="フォーカス時に枠線が青色になります">:first-child
親要素の最初の子要素に適用されるスタイルを定義します。
<style>
li:first-child {
font-weight: bold;
}
</style>
<ul>
<li>最初の項目（太字）</li>
<li>2番目の項目</li>
<li>3番目の項目</li>
</ul>:nth-child(n)
親要素のn番目の子要素に適用されるスタイルを定義します。
nは整数や “even”（偶数）、”odd（奇数）” などのキーワードで指定できます。
<style>
li:nth-child(odd) {
background-color: lightgray;
}
</style>
<ul>
<li>1番目の項目（背景色が薄灰色）</li>
<li>2番目の項目</li>
<li>3番目の項目（背景色が薄灰色）</li>
</ul>疑似クラスを利用することで、要素の状態や特性に応じたデザインを柔軟に実装できます。これらの疑似クラスを組み合わせることで、さらに詳細なスタイルの調整が可能になります。
コメント