TD : grid

 Création de la figure suivante.

https://dupontdenis.github.io/simulateur/

https://dupontcss.blogspot.com/p/test-grill.html

DM : 👾 trouvez un bug

Vous connaisez déjà ce fichier de Test (lien)

Voici un ensemble de selecteurs qui encadrent le second div.

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

👿  BUG ! 

Tout semble parfait, mais le selecteur div:last-child  {border:1px solid;} devrait lui aussi selectionner le second DIV.

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

😡😡😡

Il n'en ai rien. Trouvez l'explication à ce comportement.

See the Pen DM selecteur by dupont (@dupontcodepen) on CodePen.

Verifier votre hypothèse avec ce selecteur !

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

❎

GAME

Cliquez sur l'image

 

Trouvez un moyen de faire disparaître l'étoile ! 

DM

Testez dans l'éditeur CSS ci-dessus la régle

    article p:nth-child(4) { border : 1px solid; }

🤡 Expliquez le résultat !

<article>

<p title="Strophe1" id="st">P1</p>

<header>

<h1></h1>

<h2></h2>

</header>

<p class="refrain">P2</p>

<p title="Strophe4" id="str">P3</p>

<p class="refrain" id="ref4">P4</p>

<footer> date (1880 - 1918) </footer>

</article>

Cours en ligne

HTML/CSS

GRID

Exemples

 https://dupontdenis.github.io/grid-exemple/

Simulateur : 

https://dupontcss.blogspot.com/p/test-grill.html

Cours : grid

Objectifs

 https://dupontdenis.github.io/grid-exemple/

Cours

Projet entreprise

Z-index

Exemple-interactif 

Analyser et corriger le code

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

Analyse : la photo devrait être mise en avant.

Correction