Guter Einsatz für den Nachbar-Geschwister-Selektor ("+")

Mein Freund Richard kam gestern mit einem interessanten Problem zu mir. Er verwendete eine API, die ihm eine große Liste von Unternehmen zurückgab. Jedes Unternehmen hatte **Text** und die meisten (aber nicht alle) hatten auch ein **Bild**. Er wollte das Bild verwenden, wenn vorhanden, aber wenn das Bild angezeigt wurde, wollte er den Text nicht auch anzeigen. Die Lösung musste darin bestehen, sowohl das Bild als auch den Text auszugeben und dann zu versuchen, den Text zu verbergen, wenn möglich.

DEMO ANZEIGEN

Hier ist ein Beispiel dafür, wie der HTML-Output aussehen könnte

<img src="images/image-110.png" alt="image" />
<span>Text</span>

<br /><br />
		
<img src="images/image-110.png" alt="image" />
<span>Text</span>
		
<br /><br />
		
<span>Text</span>

Hier sehen Sie, dass die ersten beiden "Gruppen" sowohl ein Bild als auch Text haben, während die letzte nur Text hat. **Dies ist ein ideales Szenario für den Nachbar-Geschwister-Selektor!** Jeder CSS-Nerd-Traum! Was wir hier wirklich tun müssen, ist, nur die Spans anzusprechen, die unmittelbar einem Bild folgen. Das können wir tun und das Problem lösen, wie folgt:

img {
	vertical-align: middle;
	z-index: 9999;
	position: relative;
}
span {
	z-index: 1;
}
img+span {
	margin-left: -110px;
}

Das klare Englisch der Nachbar-Geschwister-Selektor-Anweisung lautet: "Suche nach Spans, die unmittelbar auf Bilder folgen, und schiebe sie nach links." Der allein stehende Span bleibt unberührt, aber die oberen beiden werden nach links geschoben. Der negative linke Außenabstand bewirkt das Verschieben und kann den Text dank des hohen z-index-Werts **unter** das Bild schieben. Die relative Positionierung ist tatsächlich erforderlich, um den z-index zum Funktionieren zu bringen.

Ich habe mich für die Lösung mit dem negativen Außenabstand entschieden, da diese Methode auch bei deaktivierten Bildern zugängliche Daten liefert. Wenn der zu verbergende Text jedoch zu groß ist, um hinter das Bild zu passen (oder das Bild transparent ist), wäre dies ein Problem. Sie könnten auch "visibility: hidden;" oder "display: none" anstelle des negativen linken Außenabstands in Betracht ziehen, was absolut funktionieren würde, aber weniger zugänglich wäre.

DEMO ANZEIGEN