Sélecteur d'un tag directement suivi d'un autre tag

Ceci sélectionne toutes les <B>balises directement précédées par des <A>balises:

A+B {
    /* styling */
}

Quel est le sélecteur pour toutes les <A>balises directement suivies de<B> balises?

Voici un exemple de HTML correspondant à ma question:

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

Vous ne pouvez pas en CSS.

Edit: Pour être un peu plus utile, si vous utilisez par exemple jQuery (une bibliothèque JavaScript), vous pouvez utiliser .prev().

Voulez-vous styler A étant donné qu'il a un élément B directement à l'intérieur ou suivi? Comme ça:

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

// OR

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

Vous ne pouvez pas (encore) faire une telle chose en CSS. Eric Meyer déclare que ce type de sélecteur a été discuté plusieurs fois sur la liste de diffusion CSS, et n'est pas faisable. Dave Hyatt, l'un des principaux développeurs WebKit, commente avec une bonne explication des raisons pour lesquelles cela ne peut pas être fait.

Découvrez: le billet de blog de Shaun Inman et le commentaire d'Eric Meyer .
David Hyatt intervient également.

Vous pouvez UNIQUEMENT faire la conversation: Ceci sélectionne toutes les balises directement précédées par des balises.

Ceci est logiquement équivalent à votre demande.

J'utilise souvent ceci pour styliser une rangée de nombreuses cases à cocher avec des étiquettes

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>

Bien que ce ne soit pas très pratique, de nos jours, vous pouvez obtenir ce comportement en inversant l'ordre de vos éléments à la fois lorsque vous générez le HTML et en appliquant les règles CSS: display: flexetflex-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>

De plus, si vous avez 2 éléments en ligne ou plus, vous pouvez y parvenir en appliquant float: right, car ils seront affichés dans l'ordre inverse:

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>