How can i select the last li in this list using only css

Question

I have a code generating segment in a loop of varying li for every loop. is it possible to select the last li of every loop using css only?

       <span class="card-title">November 19, 2015</span>
        <div class="cardseparator1"></div>
        <li>User FFDev has added 2 tasks</li>
        <li>User FFDev has added 3 forms</li>
        <li>User FFDev has added 1 users</li>
       <span class="card-title">November 18, 2015</span>
        <div class="cardseparator1"></div>
        <li>User FFDev has added 10 tasks</li>
        <li>User FFDev has added 8 forms</li>
        <li>User FFDev has added 4 assets to asset management</li>
        <li>User FFDev has added 4 users</li>
        <li>User null has updated 2 tasks</li>
        <li>User FFDev has updated 2 tasks</li>
        <li>User FFDev has updated 3 forms</li>
       <span class="card-title">November 17, 2015</span>
        <div class="cardseparator1"></div>
        <li>User FFDev has added 1 tasks</li>
        <li>User FFDev has added 3 forms</li>
        <li>User FFDev has added 1 users</li>
        <li>User FFDev has updated 2 assets to asset management</li>
       <span class="card-title">November 16, 2015</span>
        <div class="cardseparator1"></div>
        <li>User FFDev has added 1 tasks</li>
        <li>User FFDev has added 2 users</li>
       <span class="card-title">November 12, 2015</span>
        <div class="cardseparator1"></div>
        <li>User FFDev has added 1 geofence settings</li>

Your html is completely invalid, `li`s nee to be a child of `ol` or `ul` and then you can just use `li:last-child` — Pete, Dec 01 '15 at 09:25
It is a generated. I can't do anything about it. Because of that i can't use last-child or last-of-type selector! — nitesh, Dec 01 '15 at 09:28

score 0 · Answer 1 · answered Dec 01 '15 at 09:22

0

.cardseparator1 li:last-of-type { ... }

Use last-of-type - there's also first-of-type and many more e.g. nth-of-type

answered Dec 01 '15 at 09:22

StudioTime

22,603
38
120
207

Sorry, just edited the question. cardseparator1 and li is in the same ranks. – nitesh Dec 01 '15 at 09:25

score 0 · Answer 2 · edited Dec 01 '15 at 09:24

0

.cardseparator1 li:nth-last-child(1) {
        background: #ff0000;
    }

edited Dec 01 '15 at 09:24

Alex

8,461
6
37
49

answered Dec 01 '15 at 09:23

Vikas Gautam

997
7
23

score 0 · Answer 3 · answered Dec 01 '15 at 09:24

0

Try this

.cardseparator1  li:last-of-type {
    background: red;
 }

answered Dec 01 '15 at 09:24

Dilip Oganiya

1,504
12
20

score 0 · Answer 4 · answered Dec 01 '15 at 09:28

0

You can use like this below code,

li:last-child {
background: #ff0000;}

or code:

<!DOCTYPE html>
<html>
<head>
<style> 
li:last-child {
background: #ff0000;
}
</style>
</head>
<body>
<li>1</li>
<li>2</li>
<li>3</li>
</body>
</html>

answered Dec 01 '15 at 09:28

Annu

532
4
8
22

1. i'm not writing the code. it's generated. 2.Last-child selects the last li not the last li in the loop. – nitesh Dec 01 '15 at 09:35

score 0 · Answer 5 · answered Dec 01 '15 at 09:42

none of the methods will work with css unless your code is not valid with proper nesting of <li> within <ul> or <ol> like the code below I am also posting Fiddle of how to achieve it..

Working Fiddle

CODE

<span class="card-title">November 19, 2015</span>
        <div class="cardseparator1"></div>
<ul class="custom-class">
        <li>User FFDev has added 2 tasks</li>
        <li>User FFDev has added 3 forms</li>
        <li>User FFDev has added 1 users</li>
</ul>
       <span class="card-title">November 18, 2015</span>
        <div class="cardseparator1"></div>
<ul class="custom-class">
        <li>User FFDev has added 10 tasks</li>
        <li>User FFDev has added 8 forms</li>
        <li>User FFDev has added 4 assets to asset management</li>
        <li>User FFDev has added 4 users</li>
        <li>User null has updated 2 tasks</li>
        <li>User FFDev has updated 2 tasks</li>
        <li>User FFDev has updated 3 forms</li>
</ul>
       <span class="card-title">November 17, 2015</span>
        <div class="cardseparator1"></div>
<ul class="custom-class">
        <li>User FFDev has added 1 tasks</li>
        <li>User FFDev has added 3 forms</li>
        <li>User FFDev has added 1 users</li>
        <li>User FFDev has updated 2 assets to asset management</li>
</ul>
       <span class="card-title">November 16, 2015</span>
        <div class="cardseparator1"></div>
<ul class="custom-class">
        <li>User FFDev has added 1 tasks</li>
        <li>User FFDev has added 2 users</li>
</ul>
       <span class="card-title">November 12, 2015</span>
        <div class="cardseparator1"></div>
<ul class="custom-class">
        <li>User FFDev has added 1 geofence settings</li>

</ul>

CSS

.custom-class li:last-child {
    color:red;
}

How can i select the last li in this list using only css

5 Answers5