Селектор для одного тегу, за яким слідує інший тег

Question 1

Це вибирає все <B>теги безпосередньо передували по <A>тегах:

A+B {
    /* styling */
}

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

Ось зразок HTML, який відповідає моєму запитанню:

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

Question 2

Ви не можете в css.

Редагувати: щоб бути трохи кориснішим, якщо ви використовуєте, наприклад, jQuery (бібліотеку JavaScript), ви можете використовувати .prev().

Question 3

Ви маєте на увазі стиль A, враховуючи те, що він має елемент B безпосередньо всередині або слідує за ним? Подобається це:

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

// OR

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

Ви не можете зробити такого в CSS (поки що). Ерік Мейер стверджує, що такий селектор обговорювався досить багато разів у списку розсилки CSS, і це неможливо. Дейв Хаятт, один з основних розробників WebKit, коментує, добре пояснюючи, чому цього не можна зробити.

Перевірте: допис у блозі Шона Інмана та коментар Еріка Мейєра .
Девід Хаят також важить .

Question 4

Ви можете ТІЛЬКИ зробити зворотне: це вибирає всі теги, яким безпосередньо передують теги.

Це логічно еквівалентно вашому запиту.

Я часто використовую це для стилізації ряду багатьох прапорців з мітками

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>

Question 5

Хоча це не дуже зручно, сьогодні ви можете досягти такої поведінки, змінивши порядок елементів як під час створення 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>

Розгорніть фрагмент