I think there is a problem with your css selector.
You need to use :nth-child on the same div (.article-image). Like this.
#par .article-image:before {
content: '';
position: absolute;
background-size: cover;
background-position: center center;
height: 100%;
width: 100%;
max-width: 400px;
top: 0;
left: 0;
background-image: url(./images/try1.jpg);
filter: grayscale(0) blur(0);
transition: .4s ease-in-out;
}
#par .article-image:nth-child(2):before{
background-image: url(./images/try2.jpg) ;
}
#par .article-image:nth-child(3):before{
background-image: url(./images/try3.jpg) ;
}
#par .article-image:nth-child(4):before{
background-image: url(./images/try4.jpg) ;
}
I am currently working on a website project and I am trying to use the same <style> for a number of <a> but I want to set a different background image for all of them while preserving the <style> functionality. I tried with nth-child selectors but it does not preserve the functions of the CSS.
CSS
#par .article-image:before {
content: '';
position: absolute;
background-size: cover;
background-position: center center;
height: 100%;
width: 100%;
max-width: 400px;
top: 0;
left: 0;
background-image: url(./images/try1.jpg);
filter: grayscale(0) blur(0);
transition: .4s ease-in-out;
}
#par .article-image:hover:before {
-webkit-filter: grayscale(50%) blur(2px);
filter: grayscale(50%) blur(2px);
transition: .4s ease-in-out;
}
#par .article-image:before a:nth-child(2){
background-image: url(./images/try2.jpg) ;
}
#par .article-image:before a:nth-child(3){
background-image: url(./images/try3.jpg) ;
}
#par .article-image:before a:nth-child(4){
background-image: url(./images/try4.jpg) ;
}
HTML
<body>
<div id="par" class="expanded button-group hollow no-gaps parent" style="height:500px" >
<a class="large button th article-image">1
<div class="middle"> <div><img src="./images/1.jpg" /></div> </div> </a>
<a class="large button th article-image">2
<div class="middle"> <div><img src="./images/2.jpg" /></div> </div> </a>
<a class="large button th article-image">3
<div class="middle"> <div><img src="./images/3.jpg" /></div> </div> </a>
<a class="large button th article-image>4
<div class="middle"> <div><img src="./images/4.jpg" /></div> </div> </a>
</div>
</body>
P.s I tried using a:nth-child(1..2..3..4) but it did not work as it did not use the style functionality. Basically I want to set different background images that will be applied on <a> while applying the same style for all of them.
Thank you for your help. I searched everywhere but no one seemed to have answered a case like this. I guess I still have more to learn about
Great, it helped. In case you liked the answer you can always up vote it 😉 @Mechev
