Auswahl für ein Tag direkt gefolgt von einem anderen Tag

Damit werden alle <B>Tags direkt voran von <A>tags:

A+B {
    /* styling */
}

Was ist die Auswahl für alle <A>Tags, direkt gefolgt von <B>Tags?

Hier ist ein Beispiel-HTML, das zu meiner Frage passt:

<a>some text</a>
<b>some text</b>

Sie können nicht in CSS.

Bearbeiten: Um etwas hilfreicher zu sein, können Sie beispielsweise jQuery (eine JavaScript-Bibliothek) verwenden .prev().

Wollen Sie A stylen, wenn es ein B-Element direkt enthält oder folgt? So was:

<A>
    <B>
    </B>
</A>

// OR

<A>
</A>
<B>
</B>

So etwas kann man (noch) nicht in CSS machen. Eric Meyer gibt an, dass diese Art von Selektor einige Male auf der CSS-Mailingliste diskutiert wurde und nicht machbar ist. Dave Hyatt, einer der wichtigsten WebKit-Entwickler, erklärt mit einer guten Erklärung, warum dies nicht möglich ist.

Check out: Shaun Inmans Blogpost und der Kommentar von Eric Meyer .
David Hyatt wiegt auch.

Sie können NUR das Gegenteil tun: Hiermit werden alle Tags ausgewählt, denen direkt Tags vorangestellt sind.

Dies entspricht logisch Ihrer Anfrage.

Ich benutze dies oft, um eine Reihe von vielen Kontrollkästchen mit Beschriftungen zu gestalten

CSS:

label+input {
    margin-left: 4px;
}

DOM:

<input id="a" name="a" type="checkbox"/><label for="a">...</label>
<input id="b" name="b" type="checkbox"/><label for="b">...</label>
<input id="c" name="c" type="checkbox"/><label for="c">...</label>

Obwohl es nicht sehr praktisch ist, können Sie dieses Verhalten heutzutage erreichen, indem Sie die Reihenfolge Ihrer Elemente sowohl beim Generieren des HTML-Codes als auch beim Anwenden der CSS-Regeln umkehren: display: flexundflex-direction: column-reverse

ul {
  display: flex;
  flex-direction: column-reverse;
}

.b ~ .a {
  color: red;
}

<ul>
    <li class="a">A 3</li>
    <li class="c">C 2</li>
    <li class="c">C 1</li>
    <li class="b">B 1</li>
    <li class="a">A 2</li>
    <li class="a">A 1</li>
</ul>

Wenn Sie zwei oder mehr Inline-Elemente haben, können Sie dies auch durch Anwenden erreichen float: right, da diese in umgekehrter Reihenfolge angezeigt werden:

ul {
  float: left;
  list-style-type: none;
}

li {
  float: right;
}

li:not(:first-child) {
  margin-right: 20px;
}

.b ~ .a {
  color: red;
}

<ul>
    <li class="a">A 3</li>
    <li class="c">C 2</li>
    <li class="c">C 1</li>
    <li class="b">B 1</li>
    <li class="a">A 2</li>
    <li class="a">A 1</li>
</ul>