8 replies

How to select previous sibling

If you run this code, the

.last

.last

.last

.last button will increase its width when the

.central

.central

.central

.central button gets

:hover

:hover

:hover

:hover, but the same thing wont happen to

.first

.first

.first

.first, I guess because it's before

.central

.central

.central

.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>

<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;
}

.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;
}

How to select previous sibling

Similar Threads

Similar Threads

Similar Threads