Partage
  • Partager sur Facebook
  • Partager sur Twitter

probleme nth-chlid

cibler des élément

Sujet résolu
    26 octobre 2021 à 18:10:49

    bonjour, je m'apprend au css et je suis en difficulté.

    J'essaye de faire une galerie photo, mais lorsque que je veux cibler une de mes div par son ordre, ça ne marche pas..

    je suis bloqué sur ce coup. 

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="style.css">
        <title>galerie photo</title>
    </head>
    <body>
        <h1>galerie photo</h1>
    
        <div class="container">
            <div class="box">1</div>
            <div class="box">2</div>
            <div class="box">3</div>
            <div class="box">4</div>
            <div class="box">5</div>
            <div class="box">6</div>
            <div class="box">7</div>
            <div class="box">8</div>
            <div class="box">9</div>
            <div class="box">10</div>
            <div class="box">11</div>
            <div class="box">12</div>
        </div>
        
    </body>
    </html>
    body {
        background-color: rgb(232, 145, 250);
    }
    
    h1 {
        font-family: 'Courier New', Courier, monospace;
    }
    
    .container {
        background-color: rgb(91, 155, 230, 0.5);
        max-width: 82vw;
        min-width: 20vw;
        height: auto;
    }
    
    .box {
        font-size: 3rem;
         width: 20vw;
        height: auto;
    }
       
    .container:nth-child(1) {
            background-color: chocolate;
    }
        
     


    -
    Edité par LetTheBeatControlYourBody 26 octobre 2021 à 18:17:54

    • Partager sur Facebook
    • Partager sur Twitter
      26 octobre 2021 à 21:37:30

      Salut, 

      Il faut que tu indiques .box:nth-child(1) et non .container.

      D'ailleurs je te conseille d'utiliser un #id plutôt qu'une .class pour celui-ci et d'indiquer dans ta balise <html lang="fr">.

      Bonne soirée.

      • Partager sur Facebook
      • Partager sur Twitter
        26 octobre 2021 à 21:55:17

        Cuillere. a écrit:

        D'ailleurs je te conseille d'utiliser un #id plutôt qu'une .class pour celui-ci

        Bonjour, mauvais conseil. L'id à un poids plus important qu'une class, si on souhaites par la suite surcharger les règles CSS il sera plus difficile de le faire si la règle de style à déjà un poids élever. Pour comprendre le poids des déclarations voir  : 

          https://www.emmanuelbeziat.com/blog/principes-du-css-poids-des-declarations 

        Garder les identifiants pour les ancres et le JavaScript.  

        • Partager sur Facebook
        • Partager sur Twitter
          27 octobre 2021 à 12:08:22

          AbcAbc6 a écrit:

          Cuillere. a écrit:

          D'ailleurs je te conseille d'utiliser un #id plutôt qu'une .class pour celui-ci

          Bonjour, mauvais conseil. L'id à un poids plus important qu'une class, si on souhaites par la suite surcharger les règles CSS il sera plus difficile de le faire si la règle de style à déjà un poids élever. Pour comprendre le poids des déclarations voir  : 

            https://www.emmanuelbeziat.com/blog/principes-du-css-poids-des-declarations 

          Garder les identifiants pour les ancres et le JavaScript.  

          Cuillere. a écrit:

          Salut, 

          Il faut que tu indiques .box:nth-child(1) et non .container.

          D'ailleurs je te conseille d'utiliser un #id plutôt qu'une .class pour celui-ci et d'indiquer dans ta balise <html lang="fr">.

          Bonne soirée.


          Bonjour et merci beaucoup pour vos conseil, j'ai réussis à comprendre mon erreur. 

          Cordialement, 

          Sam

          • Partager sur Facebook
          • Partager sur Twitter

          probleme nth-chlid

          × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
          • Editeur
          • Markdown