CSS селектор для применения правил к элементу, если перед другим элементом

Question

Я ищу способ применить некоторые CSS к элементам по-разному, в зависимости от того, что следует за ним.Например, с этим HTML:

<ul>
  <li>
    <span class="title">Some Title</span>
    <span class="subtitle">With Some Subtitle</span>
  </li>
  <li>
    <span class="title">Only a Title</span>
  </li>
</ul>

Я хочу применить различные правила к .title в зависимости от того, есть ли или нет .subtitle.

Ближайший, который я могу выяснитьэто соседний селектор брата

.title + .subtitle { /* rules */ }

Но он применяет правила к элементам .subtitle, которым предшествует .title.Вместо этого я хочу, чтобы правило применялось к элементам .title с элементом .subtitle после него.

ПРИМЕЧАНИЕ: не важно, это широко поддерживается браузерами для моего текущего использования.Моя единственная цель, которая имеет значение, на данный момент основана на webkit.

Answer 1

Для старших братьев и сестер в спецификации CSS3 нет родного-комбинатора.

В этом случае вам, возможно, удастся уйти с помощью :only-child.

li > span.title:only-child { /* rules */ }

Answer 2

Я думаю, что это потребует возврата в движок макета и поэтому недоступно. Вы можете сделать это в jQuery довольно просто:

$('span.title + span.subtitle').prev().addClass('cssClass')