how to use CSS nth child?

Question

i have this unordered list

<ul>
     <li> test1</li>
     <li>test2 </li>
     <li class="current">test3</li>
     <li>test4</li>
</ul>

what i want to do is to select the .current child and access the test2 from it. That means to select .current and go back one step back to test2

Same for test1 go back two steps to get test1 and associate different CSS to it.

Is it feasible ?

i want to select the "li" just before the one which has a class "current" — Roh-Land, Sep 17 '13 at 13:01
You mean, you want to pass the class to the previous element? — gespinha, Sep 17 '13 at 13:03
i need to select the "li" that is just before the .current class — Roh-Land, Sep 17 '13 at 13:07
Does the markup has only 4 `li` tags or more or you don't know? — Mr_Green, Sep 17 '13 at 13:11
Are you OK with *all* previous items? Because you can sort-of do that: http://jsbin.com/oNuqUS/1/edit?html,css,output — Kobi, Sep 17 '13 at 13:14

score 5 · Answer 1 · answered Sep 17 '13 at 13:01

5

There is no previous sibling selector or parent selector, so no, it is not feasible with pure CSS.

If you used some javascript it would be quite easy, something like

document.getElementsByClassName('current')[0].previousSibling.style = /* Whatever you want here */;

Assuming that there is only one current class at a time

answered Sep 17 '13 at 13:01

Zach Saucier

24,871
12
85
147

i cannot cant add javascript, i need to find any solution using css only – Roh-Land Sep 17 '13 at 13:04
1

I'm afraid there is not one currently – Zach Saucier Sep 17 '13 at 13:04
1

There is no way to do it with CSS only – Ahmad Alfy Sep 17 '13 at 13:06
1

There is no way to do add, remove or pass classes within pure CSS, you can do it through Javascript, for example. – gespinha Sep 17 '13 at 13:07
1

@Roh-Land Currently, there is no way, but checkout [this answer](http://stackoverflow.com/a/15503444/603003). – ComFreek Sep 17 '13 at 13:08

score 0 · Answer 2 · answered Sep 17 '13 at 13:26

0

In future browsers CSS Level 4 Selectors will enable you to solve this problem more easily using something like the following (WIP) :

!li + .current {}

See: http://dev.w3.org/csswg/selectors4/#subject

answered Sep 17 '13 at 13:26

M.S.

442
3
13

how to use CSS nth child?

2 Answers2