Select last child with specific element

Question

Is it possible to use css pseudo class to select last child containing element with specific class?

Here is the code.

<ul>
    <li><span class="close">1</span></li>
    <li><span class="open">2</span></li>
    <li><span class="close">3</span></li>
    <li><span class="close">4</span></li>
    <li><span class="open">5</span></li>
    <li><span class="close">6</span></li>
    <li><span class="close">7</span></li>
</ul>

I want to apply specific styles on Number 5, means last li tag containing span tag with open class.

Thanx in advance.

I already knew that. The problem is list content is dynamic, not static. — Sanky, Dec 09 '14 at 09:45
You can use `:last-child` css selector e.g. `ul > li:last-child` thus you can apply something on css and do not bother about javascript — fly_ua, Dec 09 '14 at 09:48
I want to select last open class in list. not the last li element. — Sanky, Dec 09 '14 at 09:53

score 1 · Accepted Answer · answered Dec 09 '14 at 09:43

It's not possible using CSS only. You need to use JavaScript to do that.

Example: if you want to get LI which has the last .close element, use:

<ul>
    <li><span class="close">1</span></li>
    <li><span class="open">2</span></li>
    <li><span class="close">3</span></li>
    <li><span class="close">4</span></li>
    <li><span class="open">5</span></li>
    <li><span class="close">6</span></li>
    <li><span class="close">7</span></li>
</ul>

<script>
var last_open_li = $('.open').last().parent();
var last_close_li = $('.close').last().parent();

last_open_li.css({background: 'green'});
last_close_li.css({background: 'red'});
</script>

http://jsfiddle.net/yw7f4cfc/1/

It wont work. I want to apply css on number 5, no on number 6. — Sanky, Dec 09 '14 at 09:44
@Sanky: See my updated answer and fiddle in that. It works with last element of selected class. — pavel, Dec 09 '14 at 09:47

Select last child with specific element

1 Answers1