immediate peer

[y1n0]

I just wanna bring up the idea of having peers target just the immediate sibling (.peer + *), not all elements preceded by the peer (.peer ~ *). This will prevent peer-* styles from being accidentally applied for all element that follow the first peer, because in my experience, I only ever used peer to style the immediate next sibling. So if the styles were not applied to the immediate next sibling, they would "expire" and avoid unexpected style in case .peer is used again down the tree.
I understand how it might be useful in many cases to apply the peer style to all elements that follows. And for that, we can use the named peer which are impossible to be match unless the name is specifically mentioned.
so the following classes

<div class="peer" />
<div class="p1 peer-hover:bg-red" />
<div class="p2 peer-hover:bg-red" />

would result in the following css

.peer:hover + .peer-hover {
  ...
}

so p2 would not match. If we wanted everything to match we would use

<div class="peer/1" />
<div class="p1 peer/1-hover:bg-red" />
<div class="p2 peer/1-hover:bg-red" />

which would result in the following

.peer/1:hover ~ .peer/1-hover {
  ...
}

Another benefit of this is that we can use the same class and apply it in multiple places without using named peers (which would created other css definitions)

<div class="peer/named" />
<div class="peer" />
<div class="p1 peer-hover:bg-red peer/named-hover:font-bold" />
<div class="p2 peer/named-hover:bg-blue" />
<div class="peer" />
<div class="p3 peer-hover:bg-green" />
<div class="p4 peer/named-hover:bg-red" />