Perl Web開発者のHTML・CSS入門

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

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

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

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

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

子孫セレクタは、要素を指定するために頻繁に使います。クラス名とタグ名を組み合わせると、記述が簡潔になります。