Kevin Powell - Community•13mo ago

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•13mo 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•13mo ago

FF just pushed it https://caniuse.com/css-has Like few days ago

Jochem•13mo ago

oh! we live in exciting times!

b1mind•13mo ago

facts!

Gaming

Programming

How to select previous sibling