www.webdeveloper.com
Results 1 to 3 of 3

Thread: CSS Previous element Change

  1. #1
    Join Date
    Sep 2005
    Posts
    130

    CSS Previous element Change

    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

    Code:
    <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

  2. #2
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    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.
    "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan

  3. #3
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    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..
    Last edited by WebJoel; 05-21-2008 at 10:05 PM.
    I build for: Firefox and tweak for IE

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles