HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <title>child vs descendant</title>
  <style>
    .box > span {
      outline: 2px solid #2563eb;
    }

    .wide span {
      background: #fef08a;
    }
  </style>
</head>
<body>
  <div class="box wide">
    <span>Direct
      <span>Nested</span>
    </span>
  </div>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

CSS Child Combinator — vs descendant