Question

I have a div container which may contain different kinds of child elements:

<div id="my-container">
    <p>...</p>
    <p>...</p>
    <div>...</div>
    <blockquote>...</blockquote>
    ...
</div>

I want to select the last element in my container and apply certain styles to it. But I don't know if the last element is a p, a div, or whatever. This is how I would do that:

#my-container > *:last-child {
    /* my styles */
}

Will this work in all mobile browsers?
(In this case, I don't care about desktop browsers.)

Thanks a lot!
Karl

Was it helpful?

Solution

Prepending the universal selector is unnecessary in this case, since not specifying a selector before :last-child will still allow it to target any element that is a last-child within a parent.

The :last-child pseudo-class is also well supported among mobile browsers according to caniuse.

Instead just use:

#my-container > :last-child {
    /* my styles */
}

http://jsfiddle.net/utEUw/4/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top