🥷 Projet entreprise

 

 Z-index : La troisième dimension !

🪛Exemple-interactif 

Avec Edge, on a une vue 3D ! 

Analyser et corriger le code

https://dupontdenis.github.io/cssPostion-useCase/

Analyse : la photo devrait être mise en avant.

Last quizz !

How to

Help : grid !

 

🪛 En action

See the Pen Grid-revision def grid by dupont (@dupontcodepen) on CodePen.

Projet : grille

🔧 Création d'un site

Projet en entreprise !

🪛 Projet d'entreprise

Objectif : Adaptation d'un projet existant

inspecteur

🥷 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);

  }

}

Challenge : 👿10pts

Commencez par répondre à ce fichier de Test (🔧lien)

sélecteurs	Test
...	❎
...	❎
div + div { border:1px solid;}	❎
div:nth-child(2) {border:1px solid;}	❎
...

👿  BUG ! 

Ecrire le code dans VisualStudio code du  (lien) 

Lle selecteur div:last-child  {border:1px solid;} devrait lui aussi selectionner le second DIV.

div:last-child  {border:1px solid;}

😡😡😡

🧙🏽‍♂️ Trouvez l'explication à ce comportement.