Menu
I am using the nth-child selector to add background images for different social icons. However, all icons are appearing the same. What am I doing wrong?
.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>
214
Definition and Usage. The :nth-child(n) selector matches every element that is the nth child of its parent. n can be a number, a keyword (odd or even), or a formula (like an + b). Tip: Look at the :nth-of-type() selector to select the element that is the nth child, of the same type (tag name), of its parent.
The :nth-child selector allows you to select one or more elements based on their source order, according to a formula. It is defined in the CSS Selectors Level 3 spec as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling elements.
The nth-of-type is very similar to the nth-child pseudo-class. The main difference is that it specifically considers the type of the element getting selected before checking any other logic. Let's use our example from above but apply nth-of-type instead.
To get the nth-child of an element using the querySelector method, pass the :nth-child() pseudo-class as a parameter to the method, e.g. document. querySelector('#parent :nth-child(1)') . The nth-child pseudo-class returns the element that matches the specified position.
The nth-child selector counts siblings (i.e., elements having the same parent).
In your HTML structure, div.social-logo is always the first, last and only child of a. So nth-child has only one element to count.
However, there are multiple anchor elements, all of which are siblings (children of #social-links), so nth-child can target each one.
#social-links a:nth-child(1) div #social-links a:nth-child(2) div #social-links a:nth-child(3) div . . . Add space before ':' example:-
tr :nth-child(2) { text-align: right; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
