ウェブページをデザインする時、特定の部分にだけ「特別なおしゃれ」をしたいことがありますよね？そんな時に使えるのが、「複合セレクタ」と「疑似クラス」です。これらはCSSのマジックツールみたいなもので、とっても便利です！

複合セレクタと疑似クラスの例

CSSの複合セレクタと疑似クラスを使うと、ウェブページのデザインに細かい調整を加えることができます。以下に、具体的な例をいくつか紹介します。

子セレクタ >：特定のリストアイテムのスタイルを変える

<ul>
    <li>リストアイテム1
        <ul>
            <li>サブリストアイテムA</li>
            <li>サブリストアイテムB</li>
        </ul>
    </li>
    <li>リストアイテム2</li>
</ul>

/* トップレベルの<ul>の直下の<li>要素にのみスタイルを適用 */
ul > li {
    color: blue;
}

/* サブリストの<li>要素にはスタイルを適用しない */
ul ul > li {
    color: initial; /* 初期値に戻す、または特定の色を指定 */
}

この例では、トップレベルの<li>要素だけが青色になります。サブリストの<li>要素は影響を受けません。

• リストアイテム1
  • サブリストアイテムA
  • サブリストアイテムB
• リストアイテム2

隣接セレクタ +：見出しの直後の段落を強調

<h1>見出し1</h1>
<p>この段落は強調されます。</p>
<p>この段落は通常のスタイルです。</p>

h1 + p {
    font-weight: bold;
}

この例では、<h1>タグの直後に来る最初の<p>タグのテキストが太字になります。

見出し1

この段落は強調されます。

この段落は通常のスタイルです。

属性セレクタ [attr=value]：特定のタイプの入力ボックスをデザイン

<input type="text" placeholder="名前を入力">
<input type="password" placeholder="パスワード">

input[type="text"] {
    border: 2px solid green;
}

この例では、type="text"の属性を持つ<input>要素の境界線が緑色の太線になります。

疑似クラス :hover：リンクにマウスを乗せた時の効果

<a href="#">マウスを乗せてみてください</a>

a:hover {
    color: red;
}

この例では、リンクにマウスカーソルを乗せると、リンクのテキスト色が赤に変わります。

疑似クラス :first-child：リストの最初のアイテムだけスタイル変更

<ul>
    <li>最初のアイテム</li>
    <li>2番目のアイテム</li>
    <li>3番目のアイテム</li>
</ul>

li:first-child {
    color: purple;
}

この例では、リストの最初のアイテムだけが紫色になります。

まとめ

複合セレクタと疑似クラスを使うと、ウェブページの特定の部分に「特別なおしゃれ」をすることができます。子供や隣人、属性を持つ要素や、ユーザーのアクションに合わせてデザインを変えることが可能になります。