>

子セレクタ（セレクタ）

意味特定の親要素の直下にある子要素

>とは？

子セレクタは、CSSで特定の親要素の直下にある子要素にだけスタイルを適用するために使用します。これにより、親要素内のすべての子要素ではなく、直接の子要素にのみスタイルを指定することができます。

>の具体的な使い方

直下の子要素のみを選択するスタイリング例

<style>
  ul > li {
    color: red;
  }
</style>

<ul>
  <li>直下のリストアイテム</li>
  <li>
    別の直下のリストアイテム
    <ul>
      <li>ネストされたリストアイテム</li>
    </ul>
  </li>
</ul>

ul要素の直下にあるli要素のテキスト色を赤に設定します。ネストされたli要素には影響しません。

>に関するよくある質問

Q. 子セレクタと子孫セレクタの違いは？

A. 子セレクタ（>）は直接の子要素のみを選択しますが、子孫セレクタ（スペース）はネストされた要素も含むすべての子孫要素を選択します。

Q. 複数の子セレクタを連続で使える？

A. はい、可能です。例えば、div > ul > li は、divの直下のulの直下にあるli要素を選択します。これにより、特定の階層構造を持つ要素を正確に指定できます。

Q. 子セレクタの前後にスペースは必要？

A. 読みやすさのために通常はスペースを入れますが、必須ではありません。ul>li と ul > li は同じ意味です。ただし、可読性のためにスペースを入れることが推奨されます。

>が学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、CSSの>や[attr|=value]、::first-line、:where()、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。