Nth child selector not working in css for background in CSS Grid

Question

Hello I'm having an Issue with my 3x3 Matrix, I'm trying to change the images using Nth child in CSS, but cannot get this to change. There is an example of my Nth child usage in the code below.

I'm looking to have each square in the matrix to have different images.

Any help would be greatly appreciated.

Thanks, HizY

.box-container {
    list-style: none;
    margin: 0;
    width: 320px;
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
}

.img-box {
    width: 180px;
    height:180px;
    background-color: white;
  overflow:hidden;
  box-shadow: 0 0.15em 0.175em hsla(0, 0%, 0%, 0.1);
  border: 1px solid  hsla(0, 0%, 0%, 0.1);
  position: relative;
  border-radius: 5px;
}

.img{
  background-image:url("https://www.onlinelogomaker.com/blog/wp-content/uploads/2017/08/Fotolia_128673803_Subscription_Monthly_M.jpg");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    width: 100%;
    height: 99.94%;
    position: absolute;
    -webkit-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
}
.img-box:nth-child(2).img{
  background-image:url("https://www.onlinelogomaker.com/blog/wp-content/uploads/2017/08/Fotolia_128673803_Subscription_Monthly_M.jpg");
}
.img.active {
    width: 50%;
    height: 50%;
    -webkit-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
}

.headline {
    width: 50%;
    height: 50%;
    position: absolute;
    -webkit-transform: translate(210%, 0px);
    -ms-transform: translate(210%, 0px);
    -o-transform: translate(210%, 0px);
    transform: translate(210%, 0px);
    -webkit-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
}

.headline.active {
    -webkit-transform: translate(110%, 0px);
    -ms-transform: translate(110%, 0px);
    -o-transform: translate(110%, 0px);
    transform: translate(110%, 0px);
    -webkit-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
}
.headline h2 {
    font-family: "Open Sans", sans-serif;
    font-weight: 300;
    color: #333;
  font-size: 1.1em;
    width: 80%; 
}
.cell{
  margin-left:10px;
  margin-bottom:10px;
}


    
        
            
                
                    
                    
                        Internet Services
                    
                    
                        Safe, secure and cost-efficient broadband.
                        Read more 
                    
                
            
            
                
                    
                    
                        Security and Web Filter
                    
                    
                        Security, e-safety and web-filtering services.
                        Read more 
                    
                
            
            
                
                    
                    
                        Infra Services
                    
                    
                        Infrastructure solutions for your school.
                        Read more 
                    
                
            
        
        
            
                
                    
                    
                        Cloud Provision
                    
                    
                        Leverage the benefits of the cloud.
                        Read more 
                    
                
            
            
                
                    
                    
                        Telephony Provision
                    
                    
                        Modern, cost-effective telephony.
                        Read more 
                    
                
            
            
                
                    
                    
                        Finance Option
                    
                    
                        Financial plans to suit your schools budget.
                        Read more 
                    
                
            
        
        
            
                
                    
                    
                        Network Services
                    
                    
                        Wireless and switched infrastructure.
                        Read more 
                    
                
            
            
                
                    
                    
                        Data Services
                    
                    
                        Information on our data services.
                        Read more 
                    
                
            
            
                
                    
                    
                        Support Provision
                    
                    
                        Learn about our expert ongoing support.
                        Read more

user_13536893 · Answer

When using nth-child try to precise on the parent one when you apply it onto children sometimes won't work so select it by getting to cell as the parent like .cell:nth-child(3) .img-box .img

.box-container {
  list-style: none;
  margin: 0;
  width: 320px;
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
}

.img-box {
  width: 180px;
  height: 180px;
  background-color: white;
  overflow: hidden;
  box-shadow: 0 0.15em 0.175em hsla(0, 0%, 0%, 0.1);
  border: 1px solid hsla(0, 0%, 0%, 0.1);
  position: relative;
  border-radius: 5px;
}

.img {
  background-image: url("https://www.onlinelogomaker.com/blog/wp-content/uploads/2017/08/Fotolia_128673803_Subscription_Monthly_M.jpg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  width: 100%;
  height: 99.94%;
  position: absolute;
  -webkit-transition: all .4s ease;
  -o-transition: all .4s ease;
  transition: all .4s ease;
}

.row:nth-child(1) .cell:nth-child(1) .img-box .img {
  background: red;
}

.row:nth-child(1) .cell:nth-child(2) .img-box .img {
  background: green;
}

.row:nth-child(1) .cell:nth-child(3) .img-box .img {
  background: blue;
}

.row:nth-child(2) .cell:nth-child(1) .img-box .img {
  background: cyan;
}

.row:nth-child(2) .cell:nth-child(2) .img-box .img {
  background: skyblue;
}

.row:nth-child(2) .cell:nth-child(3) .img-box .img {
  background: darkcyan;
}

.row:nth-child(3) .cell:nth-child(1) .img-box .img {
  background: maroon;
}

.row:nth-child(3) .cell:nth-child(2) .img-box .img {
  background: tomato;
}

.row:nth-child(3) .cell:nth-child(3) .img-box .img {
  background: dodgerblue;
}

.img.active {
  width: 50%;
  height: 50%;
  -webkit-transition: all .4s ease;
  -o-transition: all .4s ease;
  transition: all .4s ease;
}

.headline {
  width: 50%;
  height: 50%;
  position: absolute;
  -webkit-transform: translate(210%, 0px);
  -ms-transform: translate(210%, 0px);
  -o-transform: translate(210%, 0px);
  transform: translate(210%, 0px);
  -webkit-transition: all .4s ease;
  -o-transition: all .4s ease;
  transition: all .4s ease;
}

.headline.active {
  -webkit-transform: translate(110%, 0px);
  -ms-transform: translate(110%, 0px);
  -o-transform: translate(110%, 0px);
  transform: translate(110%, 0px);
  -webkit-transition: all .4s ease;
  -o-transition: all .4s ease;
  transition: all .4s ease;
}

.headline h2 {
  font-family: "Open Sans", sans-serif;
  font-weight: 300;
  color: #333;
  font-size: 1.1em;
  width: 80%;
}

.cell {
  margin-left: 10px;
  margin-bottom: 10px;
}


  
    
      
        
          
          
            Internet Services
          
          
            Safe, secure and cost-efficient broadband.
            Read more 
          
        
      
      
        
          
          
            Security and Web Filter
          
          
            Security, e-safety and web-filtering services.
            Read more 
          
        
      
      
        
          
          
            Infra Services
          
          
            Infrastructure solutions for your school.
            Read more 
          
        
      
    
    
      
        
          
          
            Cloud Provision
          
          
            Leverage the benefits of the cloud.
            Read more 
          
        
      
      
        
          
          
            Telephony Provision
          
          
            Modern, cost-effective telephony.
            Read more 
          
        
      
      
        
          
          
            Finance Option
          
          
            Financial plans to suit your schools budget.
            Read more 
          
        
      
    
    
      
        
          
          
            Network Services
          
          
            Wireless and switched infrastructure.
            Read more 
          
        
      
      
        
          
          
            Data Services
          
          
            Information on our data services.
            Read more 
          
        
      
      
        
          
          
            Support Provision
          
          
            Learn about our expert ongoing support.
            Read more

user_391715 · Answer

You would need to specify both the row and column classes to with nth-child to be able to set the child element properties.

.row:nth-child(2) .cell:nth-child(2) .img-box .img {
  background: red;
}

.box-container {
  list-style: none;
  margin: 0;
  width: 320px;
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
}

.img-box {
  width: 180px;
  height: 180px;
  background-color: white;
  overflow: hidden;
  box-shadow: 0 0.15em 0.175em hsla(0, 0%, 0%, 0.1);
  border: 1px solid hsla(0, 0%, 0%, 0.1);
  position: relative;
  border-radius: 5px;
}

.img {
  background-image: url("https://www.onlinelogomaker.com/blog/wp-content/uploads/2017/08/Fotolia_128673803_Subscription_Monthly_M.jpg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  width: 100%;
  height: 99.94%;
  position: absolute;
  -webkit-transition: all .4s ease;
  -o-transition: all .4s ease;
  transition: all .4s ease;
}

.row:nth-child(2) .cell:nth-child(2) .img-box .img {
  background: red;
}

.img.active {
  width: 50%;
  height: 50%;
  -webkit-transition: all .4s ease;
  -o-transition: all .4s ease;
  transition: all .4s ease;
}

.headline {
  width: 50%;
  height: 50%;
  position: absolute;
  -webkit-transform: translate(210%, 0px);
  -ms-transform: translate(210%, 0px);
  -o-transform: translate(210%, 0px);
  transform: translate(210%, 0px);
  -webkit-transition: all .4s ease;
  -o-transition: all .4s ease;
  transition: all .4s ease;
}

.headline.active {
  -webkit-transform: translate(110%, 0px);
  -ms-transform: translate(110%, 0px);
  -o-transform: translate(110%, 0px);
  transform: translate(110%, 0px);
  -webkit-transition: all .4s ease;
  -o-transition: all .4s ease;
  transition: all .4s ease;
}

.headline h2 {
  font-family: "Open Sans", sans-serif;
  font-weight: 300;
  color: #333;
  font-size: 1.1em;
  width: 80%;
}

.cell {
  margin-left: 10px;
  margin-bottom: 10px;
}


  
    
      
        
          
          
            Internet Services
          
          
            Safe, secure and cost-efficient broadband.
            Read more 
          
        
      
      
        
          
          
            Security and Web Filter
          
          
            Security, e-safety and web-filtering services.
            Read more 
          
        
      
      
        
          
          
            Infra Services
          
          
            Infrastructure solutions for your school.
            Read more 
          
        
      
    
    
      
        
          
          
            Cloud Provision
          
          
            Leverage the benefits of the cloud.
            Read more 
          
        
      
      
        
          
          
            Telephony Provision
          
          
            Modern, cost-effective telephony.
            Read more 
          
        
      
      
        
          
          
            Finance Option
          
          
            Financial plans to suit your schools budget.
            Read more 
          
        
      
    
    
      
        
          
          
            Network Services
          
          
            Wireless and switched infrastructure.
            Read more 
          
        
      
      
        
          
          
            Data Services
          
          
            Information on our data services.
            Read more 
          
        
      
      
        
          
          
            Support Provision
          
          
            Learn about our expert ongoing support.
            Read more

Nth child selector not working in css for background in CSS Grid

2 Answers