Hover element to effect sibling element - css

Question

I have a navigation bar with a list of links and a search bar. It looks like this:
<ul>
<li class="link">Link 1</li>
<li class="link">Link 2</li>
<li class="link">Link 3</li>
<li class="link search">search</li>
</ul>
When the user hovers the "search" element, I want to
Apply a width of 500px to the hovered search elements
Apply a margin of -150px to the sibling "link" element
The CSS that I've written to do this is:
ul {
margin: 0;
padding: 0;
list-style: none;
width: 500px;
float: right;
}
.link {
width: 150px;
float: left;
line-height: 80px;
}
.search {
background: red;
width: 50px;
}
.search:hover{
width: 500px
}
.search:hover + .link {
margin-left: -150px;
}
This however has no effect on the sibling "link" elements
With pure CSS, is it possible to apply the the declarations "margin-left: -150px" on the hover of "search"?
I've created a fiddle here to illustrate the problem
https://jsfiddle.net/qut1nz9j/

Answer 1

If you use flex you can do like this. (Current browser support ~96%)`
The trick is you put the search link first in your markup and use order to show it last. With this you can use the sibling selector ~ to achieve what you want.
nav {
width: 700px;
background: green;
height: 80px;
float: left;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
width: 500px;
display: inline-flex;
}
.link {
width: 150px;
line-height: 80px;
order: 1;
}
.search {
background: red;
width: 50px;
order: 2;
}
.search:hover {
width: 500px
}
<nav>
<span>Site Name</span>
<ul>
<li class="link search">search</li>
<li class="link">Link 1</li>
<li class="link">Link 2</li>
<li class="link">Link 3</li>
</ul>
</nav>
Thanks to Joum, here is a nice addition to my solution: https://jsbin.com/yipujadewi/edit?css,output
If someone really need to target previous sibling and can't use flex, here is an abuse of direction: ltr/rtl in combination with display: table.
Src: CSS Tables, Invert order of displayed content
nav {
width: 700px;
background: green;
height: 80px;
float: left;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
width: 500px;
display: inline-table;
direction: rtl;
}
.link {
width: 150px;
line-height: 80px;
display: table-cell;
direction: ltr;
text-align: left;
}
.search {
background: red;
width: 50px;
}
.search:hover {
width: 500px
}
.search:hover ~ .link {
color: #fff;
}
<nav>
<span>Site Name</span>
<ul>
<li class="link search">search</li>
<li class="link">Link 3</li>
<li class="link">Link 2</li>
<li class="link">Link 1</li>
</ul>
</nav>