#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2004
    Posts
    39
    Rep Power
    0

    [Solved] Using two different css "tags"


    Ok, I have this code:

    Code:
    #leftColumn1 ul, #rightColumn1 ul {
    	margin: 0px;
    	padding: 10px 0px 20px;
    }
    #leftColumn1 ul li, #rightColumn1 ul li {
    	list-style: none;
    	display: inline;
    }
    
    #leftColumn1 ul li a, #rightColumn1 ul li a {
    	display: block;
    	padding: 4px 4px 6px 20px;
    	line-height: 18px;
    	background: url(/images/2.0/sidenav-bg.jpg) no-repeat left top;
    	font-family: Arial, Helvetica, sans-serif;
    }
    #leftColumn1 ul li a:hover, #rightColumn1 ul li a:hover {
    	text-decoration: none;
    	background: url(/images/2.0/sidenav-bg-over.jpg) no-repeat left top;
    	color: #FFFFFF;
    }
    which works in this HTML:

    Code:
        <div id="leftColumn1">
          <div id="leftColumnContent">
             <ul>
                <li>
                   <a href="#">LINK HERE</a>
                </li>
             </ul>
          </div>
        </div>
    this part of the CSS: /images/2.0/sidenav-bg-over.jpg
    makes it where when you hover over the link, the bg turns to an image.

    What I want to do, is have some of the use a *different* bg color so they stand out over the others.

    So I added this code:

    Code:
    
    #leftColumn1 ul a #li2, #rightColumn1 ul li a #li2 {
    	display: block;
    	padding: 4px 4px 6px 20px;
    	line-height: 18px;
    	background: url(/images/2.0/sidenav-bg.jpg) no-repeat left top;
    	font-family: Arial, Helvetica, sans-serif;
    	color: #FF0000;
    }
    #leftColumn1 ul a:hover #li2, #rightColumn1 ul li a:hover #li2 {
    	text-decoration: none;
    	background: url(/images/2.0/sidenav-bg-over-red.png) no-repeat left top;
    	color: #FFFFFF;
    }
    Then put class="li2" in the link html... but that did not work, so I replaced the #li2 with .li2
    still that did not work.

    How do I make it work?
    the HTML now shows this: (just the link part)
    Code:
    	<li class="li2"><a href="#">Link Here</a></li>
    I am not sure how to make it work. it is inside the same UL tag as the others.

    Thank you for any assistance you can offer.
    Richard
    Last edited by ukndoit; April 28th, 2013 at 06:09 AM. Reason: resolved
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2004
    Posts
    39
    Rep Power
    0

    Resolved


    I forgot, I do that in the a field: a.li2 a:hover.li2

    That fixed it.

    Richard

IMN logo majestic logo threadwatch logo seochat tools logo