J'utilise le sélecteur nth-child
pour ajouter des images d'arrière-plan pour différentes icônes sociales. Cependant, toutes les icônes apparaissent de la même manière. Qu'est-ce que je fais mal?
.social-logo {
display: inline-block;
width: 24px;
height: 24px;
transition: background-image .2s;
}
#social-links div:nth-child(1) {
background-image: url('https://mysql-raigovind93.c9users.io/Cally%20Dai//img/footer/logo-linkedin.svg');
}
#social-links div:nth-child(1):hover {
background-image: url('https://mysql-raigovind93.c9users.io/Cally%20Dai//img/footer/logo-linkedin-copy.svg');
}
#social-links div:nth-child(2) {
background-image: url('https://mysql-raigovind93.c9users.io/Cally%20Dai//img/footer/logo-dribbble.svg');
}
#social-links div:nth-child(2):hover {
background-image: url('https://mysql-raigovind93.c9users.io/Cally%20Dai//img/footer/logo-dribbble-copy.svg');
}
#social-links div:nth-child(3) {
background-image: url('https://mysql-raigovind93.c9users.io/Cally%20Dai//img/footer/logo-email.svg');
}
#social-links div:nth-child(3):hover {
background-image: url('https://mysql-raigovind93.c9users.io/Cally%20Dai//img/footer/logo-email-copy.svg');
}
#social-links div:nth-child(4) {
background-image: url('https://mysql-raigovind93.c9users.io/Cally%20Dai//img/footer/logo-insta.svg');
}
#social-links div:nth-child(4):hover {
background-image: url('https://mysql-raigovind93.c9users.io/Cally%20Dai//img/footer/logo-insta-copy.svg');
}
<div id="social-links">
<a href=""><div class="social-logo"></div></a>
<a href=""><div class="social-logo"></div></a>
<a href=""><div class="social-logo"></div></a>
<a href=""><div class="social-logo"></div></a>
</div>
Le sélecteur nth-child
compte les frères et sœurs (c'est-à-dire les éléments ayant le même parent).
Dans votre structure HTML, div.social-logo
est toujours le premier, dernier et unique enfant de a
. Donc, nth-child
n'a qu'un seul élément à compter.
Cependant, il existe plusieurs éléments d'ancrage, tous frères (enfants de #social-links
), donc nth-child
peut les cibler.
#social-links a:nth-child(1) div
#social-links a:nth-child(2) div
#social-links a:nth-child(3) div
.
.
.
Essaye ça!
<div id="social-links">
<a href=""><div class="social-logo"></div></a>
<a href=""><div class="social-logo"></div></a>
<a href=""><div class="social-logo"></div></a>
<a href=""><div class="social-logo"></div></a>
</div>
CSS
.social-logo {
display: inline-block;
width: 24px;
height: 24px;
transition: background-image .2s;
}
#social-links a:nth-child(1) .social-logo {
background-image: url('https://mysql-raigovind93.c9users.io/Cally%20Dai//img/footer/logo-linkedin.svg');
}
#social-links a:nth-child(1):hover .social-logo {
background-image: url('https://mysql-raigovind93.c9users.io/Cally%20Dai//img/footer/logo-linkedin-copy.svg');
}
#social-links a:nth-child(2) .social-logo {
background-image: url('https://mysql-raigovind93.c9users.io/Cally%20Dai//img/footer/logo-dribbble.svg');
}
#social-links a:nth-child(2):hover .social-logo {
background-image: url('https://mysql-raigovind93.c9users.io/Cally%20Dai//img/footer/logo-dribbble-copy.svg');
}
#social-links a:nth-child(3) .social-logo {
background-image: url('https://mysql-raigovind93.c9users.io/Cally%20Dai//img/footer/logo-email.svg');
}
#social-links a:nth-child(3):hover .social-logo {
background-image: url('https://mysql-raigovind93.c9users.io/Cally%20Dai//img/footer/logo-email-copy.svg');
}
#social-links a:nth-child(4) .social-logo {
background-image: url('https://mysql-raigovind93.c9users.io/Cally%20Dai//img/footer/logo-insta.svg');
}
#social-links a:nth-child(4):hover .social-logo {
background-image: url('https://mysql-raigovind93.c9users.io/Cally%20Dai//img/footer/logo-insta-copy.svg');
}
Démo en direct - https://jsfiddle.net/g59wa8uf/
Sur ma page de test, c’est parce que le