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.
>Solution :
-
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>