button:focus - anderes, nicht verschachteltes Element formatieren

[ebody]

Hallo,

ich möchte ein anderes Element einblenden, wenn auf einen Button geklickt wird. Der Button und das Element sind nicht verschachtelt. Das klappt soweit schon mal:

<button id="b1">Button 1</button>
<div>Hallo Welt!</div>

#b1:focus + div{
  display: block;
}

Was aber nicht funktioniert ist, wenn der Button verschachtelt wird

<p>
  <button id="b2">Button 2</button>
</p>
<div>Hallo Welt!</div>

p > #b2:focus + div{
  display: block;
}

Das Element vor <div> ist jetzt <p> und der :focus liegt aber auf dem Button, daher habe ich folgendes probiert, was aber auch nicht funktioniert.

p:focus + div{
  display: block;
}

Zudem soll sich der :focus auch nur auf den <button> beziehen, wenn <p> z.B. breiter als der <button> ist...

Ich habe noch verschiedenes ausprobiert, aber leider finde ich keine Lösung und wende mich daher ans Forum, in der Hoffnung, dass jemand die Lösung kennt.

Gruß ebody