1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

CSS Adjacent Selector Problem

Discussion in 'CSS' started by duilen, Dec 18, 2007.

  1. #1
    Does anyone know of a way to style sibling elements on either side of a selected element? In the below example I want to be able to hover over #three and be able to style #two and #four at the same time. With '+' you are able to style #three and #four but not #two. (at least not that I am aware of)

    Example HTML:
    
    <ul>
         <li id="one">test</li>
         <li id="two">test</li>
         <li id="three">test</li>
         <li id="four">test</li>
         <li id="five">test</li>
    </ul>
    
    Code (markup):
    Example CSS:
    
    li#three:hover, li#three:hover+li{
    background:red;
    }
    // This styles #three and #four by hovering over #three.
    
    Code (markup):
    I wish there were some kind of "-" selector to compliment the "+" selector...
     
    duilen, Dec 18, 2007 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #2
    Not that it's deployable anyways since IE6/earlier have zero support for sibling selectors.

    Hmm. You could fake the effect with extra spans, overlapping margins and z-index... You'd have to have all the items a fixed width though to pull it off.

    This is a little rough, but does what you describe.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    
    <!-- <link type="text/css" rel="stylesheet" href="screen.css" media="screen,projection" /> -->
    
    <title>Template</title>
    
    <style type="text/css">
    * {
    	margin:0;
    	padding:0;
    }
    
    body {
    	text-align:center;
    	padding:16px;
    }
    
    #mainMenu {
    	list-style:none;
    	font:normal 14px/20px arial,helvetica,sans-serif;
    }
    
    #mainMenu li {
    	display:block;
    	height:20px;
    	padding:20px 8px;
    	margin-bottom:-40px;
    	position:relative;
    }
    
    #mainMenu li span {
    	position:relative;
    	z-index:5000;
    }
    
    #mainMenu .first {
    	padding-top:0;
    }
    
    #mainMenu .last {
    	padding-bottom:0;
    	margin-bottom:0;
    }
    
    #mainMenu li:hover {
    	background:#F00;
    }
    
    </style>
    
    </head><body>
    
    <ul id="mainMenu">
    	<li class="first"><span>test</span></li>
    	<li><span>test</span></li>
    	<li><span>test</span></li>
    	<li><span>test</span></li>
    	<li class="last"><span>test</span></li>
    </ul>
    
    </body></html>
    Code (markup):
    Of course if you are doing multiple content items in dynamic sizes, the above example is useless.
     
    deathshadow, Dec 18, 2007 IP
  3. duilen

    duilen Active Member

    Messages:
    354
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    58
    #3
    That would work for for this case but it would be so much easier if you could simply select the previous sibling.
     
    duilen, Dec 19, 2007 IP