Pages

Test / CSS + Selecteurs

 On dispose de 4 blocs dans un conteneur ! Dessiner le résultat.

.conteneur {

    display: grid;

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

    grid-auto-rows: 1cm;

    grid-gap: 0.1cm;

    grid-auto-flow: row;

}

div:nth-child(1) {

  grid-column: 1/3;

  grid-row: 1/3;}

div:nth-child(2) {

  grid-column: 3/5;

  grid-row: 2/5;}

div:nth-child(3) {

  grid-row-end: span 2;

}


div:nth-child(4) {

 grid-row: 2;

}


Indiquez les lignes sélectionnées par chaque sélecteur.

  1. <h1>Heading L.1</h1>

  2. <article>

  3. <p>First paragraph</p>

  4. <p>Second paragraph</p>

  5. </article>

  6. <article>

  7. <div>div element</div>

  8. <p>First paragraph</p>

  9. </article>

  10. <p data-cont="last">paragraph</p>

sélecteurs

ligne(s)

p:first-child


body > p


article + p


article :nth-child(3)


[data-cont="last"]


Donnez le code CSS (grid) pour créer le drapeau français.

Le html est imposé.


 

<div class="flag">

    <div class="red"></div>

    <div class="blue"></div>

    <div class="white"></div>

  </div>