CSS: styling list items based on the order in which they appear rather than on classes?

Question

I'm using a CMS that generates a sitemap with very little styling options, basically, it won't allow me to add classes to the list items and I need them to give them different background colors.

Now I know there are first-child and last-child pseudo-classes that would allow me to style the first and last items in my list, but is there any CSS to allow me to call the other items in my list if a class can't be assigned to them?

The "CSS 2" in the question is confusing - is it "CSS level 2" or "CSS to"? Note that `:last-child` does not exist in CSS2, only `:first-child` does. — BoltClock, Jul 18 '12 at 13:52

score 3 · Answer 1 · edited May 23 '17 at 12:12

3

Use :nth-child() from CSS3:

/* select the third element if it's an li */
li:nth-child(3) {
    background-color: yellow;
}

:nth-child() won't work in old browsers such as IE8, but there's a CSS2 workaround.

edited May 23 '17 at 12:12

Community

1
1

answered Jul 18 '12 at 13:50

thirtydot

224,678
48
389
349

1

I just updated a similar answer of mine with an illustration of the CSS2 workaround: http://stackoverflow.com/questions/9682521/how-do-i-get-the-nth-child-of-an-element-using-css2-selectors/9682598#9682598 – BoltClock Jul 18 '12 at 13:59

Ana · Answer 2 · 2012-07-18T13:58:21.060

1

nth-child, nth-of-type

Examples:

selects the second item in the list

li:nth-child(2) {/*styles*/}

selects odd list items

li:nth-child(odd) {/*styles*/}

selects the 3rd, the 6th, the 9th, ... list items

li:nth-child(3n) {/*styles*/}

selects the 1st, the 5th, the 9th, ... list items

li:nth-child(4n+1) {/*styles*/}

edited Jul 18 '12 at 13:58

answered Jul 18 '12 at 13:51

Ana

35,599
6
80
131

score 1 · Answer 3 · answered Jul 18 '12 at 13:52

1

CSS2 doesn't support :nth-child(n), maby you could make a background-image for the < ul > with the colors on the right positions. But I say screw people with old browsers ;)

answered Jul 18 '12 at 13:52

Gijs

2,064
16
21

score 0 · Answer 4 · answered Jul 18 '12 at 13:52

With CSS2, maybe not. With CSS3, there's the nth-child() selector:

element:nth-child(2) { ... }

The above will get the second child.

jsFiddle

Otherwise, you could use JavaScript/jQuery to get the result you want. Here is a jQuery example:

$(function () {
    $('selector').eq(1).css('background', 'blue');
});

jsFiddle

CSS: styling list items based on the order in which they appear rather than on classes?

4 Answers4