前回の記事で、CSSの基本であるタグ、クラス、IDセレクタを学びましたね。これらを使いこなすだけでも、Webサイトの見た目を大きく変えられます。
今回は、これらのセレクタをさらに進化させた、より便利なセレクタを紹介します。これらを組み合わせることで、「リストの2番目の項目だけ色を変える」といった、よりピンポイントな装飾が可能になります。まるで、魔法の杖に新しい呪文が加わるようなものです。
1. 疑似クラス：要素の「状態」を狙い撃ち
疑似クラスは、要素の特別な状態（例：マウスが乗っているとき、リンクをクリックしたとき）を狙ってスタイルを適用します。セレクタの後ろに「:」（コロン）をつけて使います。
:hover：マウスが要素の上に乗ったときCSSbutton:hover { background-color: #0056b3; /* ボタンにマウスを乗せると色が変わる */ }:active：要素がクリックされたとき:focus：入力フォームなどが選択されたとき
これらの疑似クラスは、Webサイトに動きやインタラクション（ユーザーとの対話）を持たせる上で欠かせません。
2. 疑似要素：要素の「中身」の一部を装飾
疑似要素は、HTMLにはない仮想的な要素にスタイルを適用します。セレクタの後ろに「::」（コロン2つ）をつけて使います。
::before/::after：要素の中身の前後（before/after）に、新しいテキストやアイコンを挿入します。CSSli::before { content: "☆ "; /* リスト項目の前に星マークを追加 */ }
3. 組み合わせセレクタ：要素同士の関係で指定
複数のセレクタを組み合わせて、より複雑な条件で要素を指定できます。
- 子孫セレクタ ()：半角スペースで区切り、親要素の中にある子要素すべてにスタイルを適用します。HTML
<div class="container"> <p>このテキストは装飾される</p> </div> <p>このテキストは装飾されない</p>CSS.container p { font-weight: bold; /* .containerの中にあるすべてのpタグを太字にする */ } - 子セレクタ (
>):>で区切り、直下の階層の子要素にのみスタイルを適用します。子孫セレクタよりも、より厳密に要素を指定できます。
まとめ：CSSセレクタは奥が深い！
今回紹介したセレクタを使いこなせば、Webデザインの自由度は格段に広がります。
- 疑似クラスで、ユーザーの動きに合わせた動的なデザインを。
- 疑似要素で、HTMLを編集せずに装飾を追加。
- 組み合わせセレクタで、Webページの構造を利用した賢い指定を。
これらのセレクタは、Webデザインをより効率的で洗練されたものにしてくれます。まずは、これらのセレクタを使い、あなたのWebページに新しい魔法をかけてみてください。
