Selector for subsequent sibling of element containing specific item

Question

Is there a css way to select elements of X type which are after element Y type containing Z type elements?

Given the following html, i could only after the Z type, not after the Y type containing Z.

.y .z:after {
  color: green;
  /* x is not green because it's after y, not z */
}

<span class="y">
  y
  <span class "z">
    z
  </span>
</span>
<span class="x">
  x
</span>

Answer 1

No

Because there is no method of selecting UP the DOM...yet.

There is, under CSS3, no parent selector or previous sibling selector.

CSS4 offers the :has selector in which case you would be able to use

.y:has( > .z) + .x

However, at present, no browsers support this selector.

---

Note: The ::after 'element' is, in fact, a pseudo-element, not a selector, used primarily, for styling purposes for inserting "content" inside the element to which the ::after pseudo-element is attached.

Answer 2

There are two siblings selectors + and ~. The former applies for immediately preceding siblings, the latter for somewhere preceding siblings.

Your example doesn't show siblings, though, just child elements, where no special selector is needed: .y .z { }