:has

 

🥷 Avancé CSS :has

 Découvrez du CSS avancé : 🪛 en action

CSS :has() le sélecteur de parent

.gallery {

  grid-template-columns: repeat(2, 1fr);

&:has(img:nth-child(10)) {

    grid-template-columns: repeat(4, 1fr);

}

  &:has(img:nth-child(30)) {

    grid-template-columns: repeat(10, 1fr);

  }

}

github Mozilla

 https://github.com/mdn/css-examples

@container ! Comportement like @media

See the Pen use @container by dupont (@dupontcodepen) on CodePen.

CSS - display

 

Quadriller l'espace

🚀Dans le simulateur Grid-simu

Ajouter : 

.conteneur:after { content: ""; position: absolute; z-index : 1; top: 0px; right: 0; bottom: 0; left: 0; background: linear-gradient(0deg, rgba(0,0,0,.05) 1px, transparent 2px), linear-gradient(0deg, rgba(0,0,0,.1) 1px, transparent 2px), linear-gradient(90deg, rgba(0,0,0,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.1) 1px, transparent 1px); background-size: 100px 100px, 100px 100px, 100px 100px, 100px 100px; } .conteneur { position: relative; background-color: white ! important; }

Autre exemple

🚀voir https://dupontl1.blogspot.com/2025/02/damiercss.html

100% height : 🚀

Vidéo

CSS ++