Unproper CSS selector rule?

Question

Ok so this is my trouble, I'm tryin' to declare the following CSS rule div span > p span + p span {color: green;}; Or rather said, select a descendant span who is an adjacent brother of another span (both two last spans are descendant childs of a p element) of who is in turn a direct child of another span, but the most incredible of all this is that the rule div span> p span "YES" takes it

Here the "I suppose" proper nesting CSS selectors and HTML code

div span > p span + p span {color: blue;}

<div>
  <span>
    <p>
      <span>Item 1</span>
    </p>
    <p>
      <span>Item 2</span>
    </p>
      </span>
     </div>

Your code selects the `
` that is an immediate sibling *of the ``* that is a child of a `
`. In contrast, you want to select the `
` that is an immediate sibling of a `
` which contains a ``, not the `` itself. Unfortunately, there is not currently a way in CSS to select a parent that contains a specific child. See: [Is there a CSS parent selector?](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) — showdev, Feb 26 '21 at 05:14
@TannerDolby no just the last `span`one, nothing else I don't want to write so much — Federico Migueletto, Feb 26 '21 at 05:15
@showdev, but friend I just want to select the "last descendant `span` child of a `p`, why would I want to select a parent if I know it's not possible? — Federico Migueletto, Feb 26 '21 at 05:19
In order to select the last descendant `span` child of a `p`, you'd need to determine which `p` elements contain `span` elements. CSS can't do [that](https://drafts.csswg.org/selectors-4/#relational) [yet](https://caniuse.com/css-has), but [JavaScript can](https://stackoverflow.com/a/48564882/924299). — showdev, Feb 26 '21 at 05:27

Tanner Dolby · Accepted Answer · 2021-02-26T05:30:35.820

1

There currently isn't a well defined way to select the last descendant of a child element without using JavaScript. But you could try using :last-child like this.

div span p:last-child span {
  color: blue;
}

<div>
  <span>
    <p>
      <span>Item 1</span>
    </p>
    <p>
      <span>Item 2</span>
    </p>
  </span>
</div>

edited Feb 26 '21 at 05:30

answered Feb 26 '21 at 05:27

Tanner Dolby

4,253
3
10
21

1

If the goal is to select the last `span` among all `p > span` pairs, this does not consider those relationships. It selects the `span` inside the last `p` child, regardless of the children of other `p` elements. – showdev Feb 26 '21 at 05:30
@showdev it's not what I'm searching but your answer is very understandable and I think it makes sense, I'll accept it, take your upvote – Federico Migueletto Feb 26 '21 at 05:39
1

@showdev Yeah I agree. I gave a _broad_ answer that could be tinkered to better select certain pairs. Feel free to propose an edit if you think of a more succinct combinator mix. – Tanner Dolby Feb 26 '21 at 05:43

Unproper CSS selector rule?

1 Answers1