Селектор для одного тега, за которым следует другой тег

Это выбирает все <B>теги непосредственно предшествовавшие по <A>тэгам:

A+B {
    /* styling */
}

Какой селектор для всех <A>тегов, за которыми следуют<B> теги?

Вот пример HTML, соответствующий моему вопросу:

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

Вы не можете использовать css.

Изменить: чтобы быть немного более полезным, если вы используете, например, jQuery (библиотека JavaScript), вы можете использовать .prev().

Вы имеете в виду стилизовать A, учитывая, что у него есть элемент B непосредственно внутри или за ним? Как это:

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

// OR

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

Вы не можете сделать это в CSS (пока). Эрик Мейер заявляет, что этот вид селектора довольно много раз обсуждался в списке рассылки CSS, и его невозможно реализовать. Дэйв Хаятт, один из основных разработчиков WebKit, дает хорошее объяснение того, почему это невозможно.

Проверьте: сообщение в блоге Шона Инмана и комментарий Эрика Мейера .
Дэвид Хаятт тоже весит .

Вы можете делать ТОЛЬКО обратное: выбираются все теги, которым непосредственно предшествуют теги.

Это логически эквивалентно вашему запросу.

Я часто использую это, чтобы стилизовать ряд из многих флажков с помощью меток.

CSS:

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

ДОМ:

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

Хотя это не очень удобно, в настоящее время вы можете добиться такого поведения, изменив порядок ваших элементов как при генерации HTML, так и путем применения правил CSS: display: flexи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>

Кроме того, если у вас есть 2 или более встроенных элемента, вы можете добиться этого, применив float: right, поскольку они будут отображаться в обратном порядке:

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>