KPC
Kevin Powell - Community•3y ago
Bardacoon

How to select previous sibling

If you run this code, the .last button will increase its width when the .central button gets :hover, but the same thing wont happen to .first, I guess because it's before .central, how do I make this work? 
<div class="flex">
  <button class="first">ciao</button>
  <button class="center">aaaaaaa</button>
  <button class="last">ciao</button>
</div>
<div class="flex">
  <button class="first">ciao</button>
  <button class="center">aaaaaaa</button>
  <button class="last">ciao</button>
</div>
.flex {
  display: flex;
  flex-direction: row;
  background: red;
  max-width: 200px;
}

.center {
  flex-grow: 1;
}

.center:hover + .last,
.center:hover + .first {
  max-width: 100px;
}

.first,
.last {
  max-width: 0;
  overflow: hidden;
}
.flex {
  display: flex;
  flex-direction: row;
  background: red;
  max-width: 200px;
}

.center {
  flex-grow: 1;
}

.center:hover + .last,
.center:hover + .first {
  max-width: 100px;
}

.first,
.last {
  max-width: 0;
  overflow: hidden;
}
4 Replies
Jochem
Jochem•3y ago
you can't easily travel up the tree in css, only down. You can do this with :has but that doesn't have support yet in firefox 
.flex:has(.center:hover) .first
.flex:has(.center:hover) .first
+ is the "next-sibling combinator", meaning it only selects .first if it's preceded by .center:hover there is no previous sibling combinator
b1mind
b1mind•3y ago
FF just pushed it https://caniuse.com/css-has Like few days ago
Jochem
Jochem•3y ago
oh! we live in exciting times!
b1mind
b1mind•3y ago
facts!

Did you find this page helpful?