Select a element only if is not a sibling (immediately or not) of another

Question

Lets have this:

<blockquote>
  <header>header</header>
  <p>no</p>
  <p>no</p>
  <p>no</p>
</blockquote>

<blockquote>
  <p>yes</p>
  <p>yes</p>
  <p>yes</p>
</blockquote>

<blockquote>
  <p>no</p>
  <header>header</header>
  <p>no</p>
  <p>no</p>
</blockquote>

I am searching for a CSS selector (without altering the HTML) that target all the p that are both inside a blockquote but without a header sibling (those with the word “yes”).

I have tried with: blockquote :not(header) ~ p, blockquote > p ~ :not(header), and similar others with no avail. Is this even possible with CSS only?

Neil Sarkar · Answer 1 · 2020-12-10T05:42:27.283

Unfortunately this is not currently possible in pure css. The first two cases could be covered by overwriting your rules in a sibling selector, eg

blockquote p {
  background-color: hotpink;
}
blockquote header ~ p {
  background-color: transparent;
}

However in the third case while you can match elements based on their prior siblings you cannot select elements based on their prior siblings.

Is there a "previous sibling" selector?

You also cannot select a parent of an element which would allow you to select the children of the parent of a header element.

Is there a CSS parent selector?

Your :not selectors are matching the following:

blockquote :not(header) ~ p = any p with at least one previous sibling that is not a header blockquote > p ~ :not(header) = any element that's not a header element with at least one previous p sibling

Select a element only if is not a sibling (immediately or not) of another

1 Answers1