css, select previous anchor

Question

<ul class="list">
    <li><a href="">Text 1</a></li>
    <li><a href="">Text 2</a></li>
    <li><a href="" class="selected">Text 3</a></li>
</ul>

how do I select the anchor for Text 2 without adding an extra class? (and no javascript)

<style type="text/css">
    ul.list li a.selected ******{background-color:#000}
</style>

output:

<li><a href="" style="background-color:#000;">Text 2</a></li>

why no javascript? That would be the easiest way to do it and also the 'standard'. — kevtrout, Oct 05 '10 at 21:01
I just wanted it to work even when JS is disabled. But thanks ;) — , Oct 05 '10 at 21:05

score 2 · Answer 1 · answered Oct 05 '10 at 20:55

Without javascript your results will not always work across each browser. Check this link by sitepoint

This is the way it would be done using CSS3, This pesudo-class is currently not supported in Internet Explorer.

<style type="text/css">
ul.list li:nth-child(2) a { background:#000 }
</style>

score 1 · Answer 2 · answered Oct 05 '10 at 20:57

1

the nth child selector can do this. browser support varies.

try:

ul.list li:nth-child(2) a { background:#000; }

Ref: http://reference.sitepoint.com/css/pseudoclass-nthchild

answered Oct 05 '10 at 20:57

Moin Zaman

25,281
6
70
74

score 0 · Accepted Answer · edited May 23 '17 at 09:58

0

It seems like you're looking for a previous sibling selector, which unfortunately doesn't exist. See this post for useful links on what is possible.

edited May 23 '17 at 09:58

Community

1
1

answered Oct 05 '10 at 20:58

keirog

2,158
1
19
17

score 0 · Answer 4 · answered Oct 05 '10 at 21:01

I don't think there's any way to simply select *th child element. (Except firstChild element, which let you specify the first child element.) But alternatively you can consistently assign numbered ID's to li element, for example

<li id="1"><a href="">Text 1</a></li>
<li id="2"><a href="">Text 2</a></li>
<li id="3"><a href="">Text 3</a></li>

Then you can use that to specify *th li element using the value in id attribute. So your css should be

ul.list li[id="2"] a { background-color: #000; }

css, select previous anchor

4 Answers4