Question

I’m looking for a way to apply some CSS to elements differently, depending on what follows it. For example, with this 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>

I want to apply different rules to .title depending on wether or not there is a .subtitle.

The closest I can figure out is the adjacent sibling selector

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

But that applies the rules to the .subtitle elements that are preceded by a .title. Instead I want the rule to apply to .title elements with a .subtitle element after it.

NOTE: it’s not vital this is widely supported by browsers for my current usage. My only target that matters is webkit based at the moment.

Answer 1

There’s no sibling-combinator for “older” siblings in the CSS3 spec.

In this case, you might be able to get away with :only-child.

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