Child Selectors

Introduction

Ideally, a CSS child selector selects the children of an element without selecting its descendants further down the tree. For example, if we want to select <div> children of a <div>, we want to select <div><div>...</div></div>, but not <div><p><div>...</div><p><div>. This can easily be done with the CSS child selector >.

<style type="text/css">
  div       { background-color: lightgreen; }
  div > div { background-color: green;      }
</style>
Level 1
Level 2
Level 3

Unfortunately, there’s a problem.