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

Question

Dies selektiert alle <B> Tags direkt vorausgegangen ist von <A> Tags:

A+B {
    /* styling */
}

Was ist der Selektor für alle <A> Tags direkt gefolgt von von <B> Tags?

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

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

Answer 1

Meinen Sie die Formatierung von A, wenn ein B-Element direkt darin enthalten ist oder darauf folgt? Etwa so:

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

// OR

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

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

Sehen Sie sich das an: Shaun Inman's Blogbeitrag und die Kommentar von Eric Meyer .
David Hyatt meldet sich zu Wort auch.

Answer 2

In CSS geht das nicht.

Editar: Wenn Sie z. B. jQuery (eine JavaScript-Bibliothek) verwenden, können Sie Folgendes verwenden .prev() .

Answer 3

Sie können NUR das Gegenteil tun: Es werden alle Tags ausgewählt, die direkt vor den Tags stehen.

Dies entspricht logischerweise Ihrer Forderung.

Ich verwende 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>

Answer 4

Obwohl es nicht sehr praktisch ist, kann man dieses Verhalten heutzutage erreichen, indem man die Reihenfolge der Elemente sowohl bei der Generierung des HTML als auch bei der Anwendung der CSS-Regeln umkehrt: display: flex y flex-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 2 oder mehr Inline-Elemente haben, können Sie dies auch erreichen, indem Sie float: right , da sie 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>