如何使用nth-child属性更改背景图像？

Question

I have the following html code. From row onwards it is repeated 2 more time inside the class contenedor, only thing that changes is the href url and de class in i(an icon).

<div class="contenedor">
<div class="row">
        <div class="col-lg-12">
            <center>
                <div class="zoom espacio">
                    <div class="contorno">
                        <a href="carta.html">
                            <i class="fas fa-shopping-bag fa-5x"></i>
                        </a>
                    </div>
                </div>
                <p>Prueba</p>
            </center>
        </div>
    </div>

<!–– Second time––>
<!–– Third time ––>
</div>

And this CSS. What it does is that when I hover over the element I change the background image of contorno. I would like to change the image of the 3 elements individually with the nth-child property:

.contorno:hover{
background-color: none;
background-size: cover;
    background-image: url("someURL");
}

And this is what I've tried but it's not working:

.contenedor .row .col-lg-12 .zoom .espacio .contorno:hover:nth-child(1){
background-image: url("someURL");
}

Thank 4 the help.

Answer 1

You would need to select the nth-child of .contenedor which is your .row .

.contenedor .row:nth-child(1) .col-lg-12 .zoom.espacio .contorno:hover {
  background-image: url("someURL");
}

 .contenedor .row:nth-child(1) .col-lg-12 .zoom.espacio .contorno:hover { color: red; } .contenedor .row:nth-child(2) .col-lg-12 .zoom.espacio .contorno:hover { color: blue; } .contenedor .row:nth-child(3) .col-lg-12 .zoom.espacio .contorno:hover { color: green; } 

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/> <div class="contenedor"> <div class="row"> <div class="col-lg-12"> <center> <div class="zoom espacio"> <div class="contorno"> <p> First </p> </div> </div> </center> </div> </div> <div class="row"> <div class="col-lg-12"> <center> <div class="zoom espacio"> <div class="contorno"> <p> Second </p> </div> </div> </center> </div> </div> <div class="row"> <div class="col-lg-12"> <center> <div class="zoom espacio"> <div class="contorno"> <p> Third </p> </div> </div> </center> </div> </div> </div> 

Also your selector was incorrect. The .zoom .espacio should be .zoom.espacio because .espacio is not nested inside .zoom ... they are the same element.

I would also recommend removing the <center> tag because it is deprecrated.