DS / 30 minutes

 A) Sélectionnez les deux premiers <p> avec quatre types de sélecteurs différents.

<p id="d1" class="s">p 1</p> <p id="d2" class="s">p 2</p> <p id="d3">p 3</p> <p id="d4">p 4</p>

🆘Utilisez le simulateur : https://dupontdenis.github.io/TestSelecteurDemo/

B) Donnez les codes HTML et CSS pour la création d'un trombinoscope trois étudiants par ligne.

🆘https://dupontl1.blogspot.com/2024/02/flex-de-la-theorie-la-pratique.html

Il suffit de simplifier le code (notezz le fake des images avec 

🖼️https://testgithubdupont.github.io/row-3-cols/

🚧https://github.com/testgithubdupont/row-3-cols.git

C) Indiquez les lignes sélectionnées pour chaque sélecteur

<article>  <p title="Strophe1" id="st"></p>  <header>  <h1></h1>  <h2></h2></header>  <p class="refrain"></p>  <p title="Str4" id="str"></p>  <p class="rn" id="r"></p></article>  <footer> date (1880 - 1918) </footer>	sélecteur	lig.
	p + p
	p:nth-child(2)
	article   :last-child:not(p)
	[class $="n"]
	article   :nth-of-type(-n+1)

🚧Préparation au DS : https://dupontl1.blogspot.com/2024/02/preparation-au-ds.html

🥷Attention au HTML

Avant formatage

Après formatage

🆘Utilisez le simulateur : https://dupontdenis.github.io/TestSelecteurDemo/

D) Donnez la représentation du code pour 2 <div> dans un conteneur.

.conteneur { display:flex; flex-wrap: wrap }

.conteneur div { flex: 1 0 100px; }

🆘Utilisez le simulateur https://dupontcss.blogspot.com/p/test-grill.html

Vous pouvez supprimer deux blocs par l'inspection

Cas conteneur   width<100px

Cas conteneur 100px<width<199px

Cas width>=200px