:nth-child not working for Wordpress widget titles

Question

I'm trying to use the :nth-child pseudo class to give each sidebar widget title a unique background colour and icon alongside the title text.

At the moment, it's displaying the background-color and background-image for :nth-child(1) for all 3 sidebar widget titles, instead of :nth-child(1) for the Twitter, :nth-child(2) for the Poll and :nth-child(3) for Instagram.

.main .sidebar .widgettitle:nth-child(1) {
    background-color: #25abdc !important;
    color: #ffffff; 
    background-image: url('/wp-content/uploads/2014/08/twitter-icon.png');
    background-repeat: no-repeat !important;
    background-position: 15% !important;
}

.main .sidebar .widgettitle:nth-child(2) {
  background-color: #f18484  !important;
  color: #FFFFFF;
  background-image: url('/wp-content/uploads/2014/08/poll-icon.png');
  background-repeat: no-repeat !important;
  background-position: 15% !important;
}

.main .sidebar .widgettitle:nth-child(3) {
  background-color: #25abdc  !important;
  color: #ffffff !important; 
  background-image: url('/wp-content/uploads/2014/08/instagram-icon.png') ;
  background-repeat: no-repeat !important;
  background-position: 15% !important;
}

The URL is http://1musicnetworks.kingly.co.za/.

Because it is `nth-child` not `nth-of-class`. CSS pseudo classes such as `:nth-child`, `:nth-of-type`,... matches the nth *child* or *type of an element* within the children tree of the parent. They don't look into a list of classes. — Hashem Qolami, Aug 28 '14 at 20:10
possible duplicate of [CSS selector for first element with class](http://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class) — Paulie_D, Aug 28 '14 at 20:12
Please, read [How to create a Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve). In cases like this, apart from posting all relevant code, also add a fiddle that demonstrates the problem. . . . Oh, yes, researching this site prior to asking is essential. Good luck! — brasofilo, Aug 28 '14 at 20:13
`nth-child` and `nth-of-type` all work on elements with the same parent and on elements only...not classes. — Paulie_D, Aug 28 '14 at 20:13
@HashemQolami - I tried :nth-of-class, that didn't work and removed the styling from all of them. — Rob Watt, Aug 28 '14 at 20:15
@basofilo - Thanks for the share, I did search the site before posting. Appreciate the help guys! — Rob Watt, Aug 28 '14 at 20:17
@RobWatt Oh my god, sorry if I've confused you. There's no `nth-of-class`. I meant that CSS pseudo classes don't respect to class names, but the elements themselves. — Hashem Qolami, Aug 28 '14 at 20:19
@RobWatt In this particular case, this selector would match the valid `h3` element: `.main .sidebar li:nth-child(1) > h3` Change `1` to `3` or `5` for the next widgets. — Hashem Qolami, Aug 28 '14 at 20:24
@Paulie_D - currently going through that link you sent me. Still trying to figure this out. I tried using ".main .sidebar .widgettitle:nth-child(1) h3 ", no luck there either. — Rob Watt, Aug 28 '14 at 20:29
@Paulie_D - I think you may have given my question the -1 - can you please change that - my question and solution is not the same as "CSS selector for first element with class". Thanks in advance. — Rob Watt, Aug 28 '14 at 20:54

Mrchief · Accepted Answer · 2014-08-28T20:27:01.613

1

Sorry my bad. Yes I din't pay much attention to the markup.

But looking at the markup, here's something you can do - instead of targetting .widgettitle, you can target the li like this:

.main .sidebar li:nth-child(3) .widgettitle {
    background-color: red !important;
    color: #FFFFFF;
}

(lame) Fiddle

Note: I just used red to highlight the effect. Feel free to replace it with your colors and styles.

edited Aug 28 '14 at 20:27

answered Aug 28 '14 at 20:13

Mrchief

75,126
20
142
189

1

I'm pretty sure that you didn't check the markup of the provided link – Hashem Qolami Aug 28 '14 at 20:16
Yeah, it's a solitary `h3` in each case. `nth-of-type` will not work here. – Paulie_D Aug 28 '14 at 20:17
Yeah, I had tried nth-of-type previously to no avail. – Rob Watt Aug 28 '14 at 20:27
@Mrchief - Thanks so much :) That was 95% of it. I gave them each an interval of 2 and that worked. i.e. FIRST CHILD = ".main .sidebar li:nth-child(1) .widgettitle". SECOND CHILD = ".main .sidebar li:nth-child(3) .widgettitle". THIRD CHILD = ".main .sidebar li:nth-child(5) .widgettitle" – Rob Watt Aug 28 '14 at 20:35

:nth-child not working for Wordpress widget titles

1 Answers1