Why is nth-child selector not working?

Question

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>

I see that you have _hardcoded_ the chid's index in nth child selector styles. Shouldn't it be an expression e.g. `2n`, `2n+1`, etc. If you put simply a number in the parentheses, it will match _only_ that number element. For example, here is how to select _only_ the 5th element: `ul li:nth-child(5) { color: #ccc;}`. More details [here](https://css-tricks.com/how-nth-child-works/) — RBT, May 01 '21 at 05:48

Michael Benjamin · Accepted Answer · 2017-01-26T16:06:59.780

58

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 
              .
              .
              .

edited Jan 26 '17 at 16:06

answered Jan 26 '17 at 04:56

Michael Benjamin

346,931
104
581
701

2

ah, it took me a while to digest that, but you're absolutely right. In this case, would you just recommend me adding a class to every div, since this ruleset (at least to me) is not so readable. – Govind Rai Jan 26 '17 at 05:19
nth-child works fine. You just need to apply it properly. Remember that it always applies (and counts all) siblings. – Michael Benjamin Jan 26 '17 at 12:56
1

I contributed a canonical answer [several years ago](http://stackoverflow.com/questions/4195161/how-can-i-select-an-nth-element-without-knowing-the-parent-element/4195253#4195253), however it was a tangential point to an otherwise poorly thought out question about a completely unrelated topic, which makes it an unsuitable duplicate target. I'm thinking of migrating the canonical answer to a new question with the title "Do selectors like :first-child and :nth-child() go on the parent element or child element?" What do you think? – BoltClock Jan 28 '17 at 14:09
@BoltClock, reading your canonical, it's a great answer. I think the migration idea to a more suitable question makes a lot of sense. A clear and complete post appears to be missing for this very common question. (When I edited this post to formulate a more relevant title, I was a bit surprised the new title didn't already exist. LOL!) – Michael Benjamin Jan 28 '17 at 14:14
1

@Michael_B: It's easy to write bad question titles, and *fiendishly difficult* to write good ones. – BoltClock Jan 28 '17 at 14:15
1

I haven't yet posted the canonical answer, but take a look at what's become of the old one :P – BoltClock Jan 28 '17 at 14:39

Naresh Bisht · Answer 2 · 2021-03-04T16:40:15.807

17

Add space before ':' example:-

tr :nth-child(2)
{
    text-align: right;
}

edited Mar 04 '21 at 16:40

answered Apr 11 '20 at 15:14

Naresh Bisht

645
6
16

For me it worked the other way round. I had to remove the space between `li` and `nth` to make it work like this `li:nth-child(2n) {` – RBT May 01 '21 at 05:44
@RBT I was starting with what you had originally, and switched to Naresh's answer. Naresh's answer worked for me – zbz.lvlv Jun 01 '21 at 02:23
What is the reason that space is needed? I was astonished this actually solved my issue (Angular Material) – Behemoth Jul 21 '21 at 08:46

score 3 · Answer 3 · answered Mar 20 '21 at 17:07

I wanted to mention that in my case when using React and node-sass, the nth-child property doesn't work if I pass just 1, I need to specify 1n in order for it to work. So in the in end it would work as:

.myClass {
  &:nth-child(1n)     { color: red; }
  &:nth-child(2n + 1) { color: blue; }
}

score 1 · Answer 4 · answered Jan 26 '17 at 06:21

Try this!

<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 live - https://jsfiddle.net/g59wa8uf/

score 1 · Answer 5 · edited Nov 06 '19 at 00:56

1

On my test page it was because the <hr /> tag will break the count on the selector logic.

edited Nov 06 '19 at 00:56

Cody Gray - on strike

239,200
50
490
574

answered Nov 15 '18 at 22:03

Jesse Bacon

19
1

Why is nth-child selector not working?

5 Answers5

Linked

Related