Adjacent-Sibling selector list

Author: Russ Weakley

Comment: Adjacent-Sibling selectors will select an element which immediately follows another element. Using Adjacent-Siblings you can actually swap the order of list items. This method is not supported by Win/IE5 or Win/IE6 (two of the most widely used browsers). In fact, both browsers render this list so poorly that it is not recommended for general use at this stage.

Browser support chart

#navlist
{
list-style-type: none;
padding: 0;
margin: 0 0 0 30px;
width: 11em;
height: 10em;
position: relative;
}

#navlist a
{
text-decoration: none;
display: block;
width: 10em;
height: 1em;
padding: .2em;
background: #ccc;
color: #333;
border: 1px solid #aaa;
}

#navlist a:hover
{
background: #333;
color: #fff;
border: 1px solid #000;
}

#navlist li
{
position: absolute;
left: 0;
top: 8em;
text-decoration: none;
}

#navlist li+li
{
position: absolute;
left: 0;
top: 6em;
}

#navlist li+li+li
{
position: absolute;
left: 0;
top: 4em;
}

#navlist li+li+li+li
{
position: absolute;
left: 0;
top: 2em;
}

#navlist li+li+li+li+li
{
position: absolute;
left: 0;
top: 0;
}