Adapter une carte à son contenu avec :has()
HTML
index.html <div class="container">
<div class="cards">
<div class="card">
<h2>My title card</h2>
<p>Depuis longtemps, on a souhaité pouvoir appliquer le style sur un élément en fonction de ses enfants.</p>
</div>
<div class="card">
<img src="https://samuelgomez.fr/images/avatar.webp" alt="samuel gomez" width="100" />
<h2>My title card with image</h2>
<p>Depuis longtemps, on a souhaité pouvoir appliquer le style sur un élément en fonction de ses enfants.</p>
</div>
</div>
</div>
CSS
style.css @layer demo {
.card {
&:has(img) {
display: grid;
align-items: center;
grid-template-columns: auto 1fr;
column-gap: 1rem;
box-shadow: 0 0 10px 5px hsla(0 50% 0% / 30%);
> img {
grid-row: 1;
grid-column: 1;
}
> h2 {
grid-column: 2;
grid-row: 1;
margin: 0;
color: orange;
}
> p {
grid-column: 1 / 3;
grid-row: 2;
}
}
}
}
@layer demoStyles {
body {
font-family: Open Sans, sans-serif;
height: 100svh;
background: #dfc2f2;
background-image: linear-gradient(135deg, #ce9ffc 10%, #7367f0 100%);
background-size: cover;
}
h2,
p {
margin: revert;
}
.container {
width: 80%;
container-type: inline-size;
container-name: conteneur;
}
.cards {
display: flex;
gap: 1rem;
@container conteneur (width <= 320px) {
flex-direction: column;
}
}
.card {
padding: 1rem;
background: white;
border-radius: 10px;
max-width: 50%;
@container conteneur (width <= 320px) {
max-width: 100%;
}
}
}