🔧 5 modern CSS features for 2024

div:has(.active) {
       background-color: lightgreen;
   }```
{% endraw %}



2. Container Queries:
   - These enable responsive design based on the size of a container.

Change the layout of the card based on its container size
{% raw %}


```css
   @container (min-width: 500px) {
       .card {
           display: flex;
           flex-direction: row;
       }
   }

   @container (max-width: 499px) {
       .card {
           display: block;
       }
   }

   .card {
       background-color: white;
       padding: 20px;

       .button {
           background-color: blue;
           color: white;
           padding: 10px;
       }
   }

   p {
       text-wrap: balance;
       width: 300px; / Set a width for the effect /
   }

   input:focus-visible {
       outline: 2px solid blue;
       background-color: lightyellow;
   }