[Résolu] probleme nth-chlid - cibler des élément par LetTheBeatControlYourBody - page 1

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

IIIIlllIIII

Cuillere.

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.

AbcAbc6

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.

LetTheBeatControlYourBody

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

IIIIlllIIII

probleme nth-chlid

cibler des élément

Supprimer

Modérer

Signaler le message aux modérateurs