使用CSS在子div上应用不同的样式

Question

I want to apply different style on different childs of div. Here is my code, but it is not working. Could anyone help me? How it is possbile to change style across each div child. The selector nth-child('target') not working

HTML:

<div class='background'>
 bg1
</div>

<div class='image'>
 img1
</div>
<div class='image2'>
 img21
</div>
<div class='text'>
 <p>
       1 A website, also written as web site,is a collection of related web pages, including multimedia content, typically identified with a common domain name, and published on at least one web server.
  </p>
</div>
<div class='background'>
  bg2
</div>
<div class='image'>
 img2
</div>
<div class='image2'>
 img22
</div>
<div class='text'>
  <p>
       2 A website, also written as web site,is a collection of related web  pages, including multimedia content, typically identified with a common domain name, and published on at least one web server.
  </p>
</div>

I can't access each div child seperately

CSS

 div.background:nth-child(1)
        {
            position: absolute;
            margin-top: -200%;
            width: 100%;
            height:180%;
        }
 div.image:nth-child(1){
            background-image: url(<?php echo base_url('Images/fantasy_mountain_art_hd_wallpapers.jpg'); ?>) ;
            position: relative;
            margin-top: 150px;
            height: 40%;
            width: 56%;
            margin-left: 20%;
            align-content: center;
            will-change: scroll-position;
            pointer-events: auto;
            background-size: 100% 280px;
            border: 4px solid gainsboro;
            border-radius: 5px;
        }
 div.image2:nth-child(1){
            background-image: url(<?php echo base_url('Images/RPyvJD.jpg'); ?>) ;
            background-size: 100% 280px;
            position: relative;
            margin-top: 100px;
            margin-left: 20%;
            height: 40%;
            width: 56%;
            border: 4px solid gainsboro;
            border-radius: 5px;
        }
  div.text:nth-child(1){
            position: relative;
            color: whitesmoke;
            margin-top: -10px;
            width: 50%;
            font-size: x-large;
            font-family: Forte;
            margin-left: 20%;
        }
  div.background:nth-child(2)
        {
            position: absolute;
            margin-top: 500px;
            width: 100%;
            height: 90%;
            background-color: black;
            -webkit-animation-name: example; /* Chrome, Safari, Opera */
            -webkit-animation-duration: 20s; /* Chrome, Safari, Opera */
            -webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
            animation-name: example;
            animation-duration: 40s;
            animation-iteration-count: infinite;
        }
  div.image:nth-child(2)
        {
            background-image: url(<?php echo base_url('Images/tumblr_o7t5h0LV6T1tal018o1_500.gif'); ?>) ;
            position: absolute;
            width: 20%;
            height: 40%;
            margin-top:5% ;
            opacity :0.4;
        }
  div.image2:nth-child(2)
        {
            background-image: url(<?php echo base_url('Images/giphy3.gif'); ?>) ;
            position: absolute;
            margin-top: 5%;
            margin-left: 60%;
            width: 20%;
            height: 40%;
            opacity :0.4;
        }

Answer 1

since you're using classes you technically don't have to use nth-child() to target the element you want, however if you have/need/want to use nth-child then make sure your giving it the appropriate location to find the children in, if you write:

div.image:nth-child(2){}

it will look for the second instance where div.image appears as a CHILD of whatever the wrapper is, so make sure you set a div wrapper and if you want add a class of container to it, put all the html elements you want to use nth-child to find inside this new container.

then you can use the selector like this:

.container > div:nth-child(1) {}

hope it helps, gl.