Perl Web開発者のHTML・CSS入門

子セレクタ - CSS入門【CSS3対応】

子セレクタは、スタイルシート(CSS)を適用する要素を、親子関係にあるIDセレクタ、クラスセレクタ、要素セレクタを使って指定することができる機能です。

以下の例では「.food > ul」という指定で「.food」の直接の子である「ul」を指定しています。「.food > ul > li」という指定で「.food」の直接の子である「ul」の直接の子である「li」を指定しています。

子孫セレクタと異なり直接の子だけが対象になることに注意してください。

<style>
  .food > ul {
    border:1px solid #ddd;
  }
  .food > ul > li {
    color:red;
    list-style:none;
    padding-left:5px;
  }
</style>

<div class="food">
  <ul>
    <li>焼肉</li>
    <li>サラダ</li>
    <li>うどん</li>
  </ul>
</div>