last child with element inside

Question

I think this is impossible :-(

Using CSS, I need to select the last label in the list of paragraphs, which is inside of a span.

<div>
    <p>
        <span>
            <label>no good, because not the last</label>
        </span>
    </p>
    <p>
        <span>
            <label>good</label> <!-- This one should be selected -->
        </span>
    </p>
    <p>
        <label>no good, because is not inside of a span</label>
    </p>
</div>

Virtually the selector would be something like this:

div (p > span):last-child label {
    background: red;
}

But I don't think CSS understands parenthesis (yet).

The reason for this is that ExtJS (Sencha) puts radio buttons in nested containers. The visibility of buttons is declared in the inner containers (that would be the span tags in the example above). I want to round corners of the last VISIBLE label, thus I need to find the last outer container that has an inner container declaring it's visibility.

Perhaps there is a different workaround for this? As a last resort, I'd accept a JS solution, as long as it's based on native ExtJS components/elements traversing syntax, rather than jQuery.

Please ask for more detail if needed.

Answer 1

It will (maybe, depends on if the selector will be in the final spec) partly be possible with CSS 4:

!p > span {
    background: red;
}

But this will select all <p/> that have a <span/> inside, not only the last one. CSS currently does not know a :last selector, and as far as I can see even with CSS 4 this won't be implemented¹.

So the summary is: Currently there is no way to do this in pure CSS.

---

Currently your only option is to use JavaScript. A sample in jQuery would be:

$('p:has(span)').last().css({ 'background': 'red' });

Here is a demo.

Or, as you mentioned in your comment, with extjs:

Ext.select('p:has(span):last').setStyle('background', 'red');

Here is a demo.

---

Answer to your updated question

Your new example does not need a parent selector anymore. The partly working CSS would be

div > p > span > label {
    background: red;
}

But still: There is no :last selector in CSS¹. Updating the above JavaScript samples:

jQuery:

$('div > p > span > label').last().css({ 'background': 'red' });

extJS:

Ext.select('div > p > span > label:last').setStyle('background', 'red');

---

^{1 About the :last selector:}

To make it more clear: :last-child selects the last child inside an element in the dom, whatever it is. It is no sub query. So, even if your parenthesis version would be implemented, :last-child would select nothing because the really last element is not part of the query. You would need a :last selector like in some JavaScript libraries which selects the last item of the resultset, so it's a sub query. This is a completely different selector and will not be part of CSS soon.