How do i make a light dark specific css tag?

Question

Light Dark Css

body.light + .mat-medium {
  background: rgba(246,246,246,0.60);
  backdrop-filter: blur(30px) saturate(1);
}

<body class="light">
    <div class="mat-medium"></div>
</body>

I was hoping that the div would display the mat-medium class because the body had the class light but it displayed a blank div.

View the repl.

There's no such thing as a CSS tag. Did you mean a rule? Also, you've implemented a sibling selector. The body and the div are not siblings. — isherwood, Mar 17 '23 at 20:21

score 1 · Accepted Answer · answered Mar 17 '23 at 20:11

You need to fix your selector to select the div inside the body. You used element + element selector, which selects the first 'div' element that is placed immediately after 'body' element, but you need element > element selector to select the child 'div'
Also you need to set some width/height to the div to make it visible or add some content inside it.

body.light>.mat-medium {
  width: 100px;
  height: 100px;
  background: rgba(216, 246, 246, 0.60);
  backdrop-filter: blur(30px) saturate(1);
}

<body class="light">
  <div class="mat-medium"></div>
</body>