selectores child attribute html css css-selectors

html - attribute - ¿Por qué el selector nth-child no funciona?



selector css (2)

¡Prueba esto!

<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''); }

Demo en vivo - https://jsfiddle.net/g59wa8uf/

Estoy usando el selector nth-child para agregar imágenes de fondo para diferentes íconos sociales. Sin embargo, todos los iconos están apareciendo de la misma manera. ¿Qué estoy haciendo 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>


El selector nth-child cuenta hermanos (es decir, elementos que tienen el mismo padre).

En su estructura HTML, div.social-logo es siempre el primer, último y único hijo de a . Entonces, nth-child tiene solo un elemento para contar.

Sin embargo, hay múltiples elementos de anclaje, todos los cuales son hermanos (hijos de #social-links ), por lo que nth-child puede apuntar a cada uno.

#social-links a:nth-child(1) div #social-links a:nth-child(2) div #social-links a:nth-child(3) div . . .