CSS Adjacent Selector Problem

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

0
  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,999
    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