CSS Previous element Change

[Jster]

OK, I have a UL and each LI has a link. Each link class has an image attached to the end of the link. I was wondering how I could change the Previous LI link class to match with the current hover class of the li I am hovering over. Example

<UL>
<LI ID="li1" class="notcurrent"><a href="">HERE</a></li>
<LI ID="li1" class="notcurrent"><a href="">HERE1</a></li>
<LI ID="li1" class="current"><a href="">HERE2</a></li>
<LI ID="li1" class="notcurrent"><a href="">HERE3</a></li>
</ul>

<style>
.notcurrent
{
color: #FF0000;
}
.current
{
color: #000000;
}

Thanks,
Josh

[ray326]

I was wondering how I could change the Previous LI link class to match with the current hover class of the li I am hovering over.

Can you say that another way? I'm not catching your meaning.

[WebJoel]

You are asking about "psuedo-classes". The a:pseudo-class. But first, -you have problems with re-used IDs

<UL>
<LI ID="li1" class="notcurrent"><a href="">HERE</a></li>
<LI ID="li1" class="notcurrent"><a href="">HERE1</a></li>
<LI ID="li1" class="current"><a href="">HERE2</a></li>
<LI ID="li1" class="notcurrent"><a href="">HERE3</a></li>
</ul>

<style>
.notcurrent
{
color: #FF0000;
}
.current
{
color: #000000;
}

Problem here, as you cannot re-use an ID on the same page. Consolidate this and let the effect 'cascade' (hence the meaning of "CSS") down through the elements:
HTML:

<ul id="navigation">
<li><a href="#">HERE</a></li>
<li><a href="#">HERE1</a></li>
<li><a href="#">HERE2</a></li>
<li><a href="#">HERE3</a></li>
</ul>

CSS:

a {....}
#navigation a:link {....}
#navigation a:visited {....}
#navigation a:hover, #navigation a:focus {....}
#navigation a:active {....}

The CSS here is as follows:

a {} is for any link that does NOT change (general links, etc.)
#navigation a:link {} is for the "current, unvisited" state you'd see on fist-visit to the page.
#navigation a:visited, is for "visited".
#navigation a:hover, #navigation a:focus {} is for "hover". "focus" is exactly the same thing, except for non-mouse tools (TABS, etc) for handicapped users. -If you have no hands or no arms, -you aren't using a mouse pointer so, -how can you 'hover'? -With TABS. Proof: -put a pencil in your mouth and try using a "mouse" pointer tool... now, try using the TABS. That is what handicapped people have to deal with..
#navigation a:active {} is the "mouse-down" state.

Note that what we are doing here, is 'seperating the presentational CSS from the content HTML'.
The HTML will be smaller, easier to debug, will index better, load faster, etc. The CSS if moved to an external file will be 'cached' so subsequent pages won't have to re-read this again and those pages will load faster still..