CSS lists and preudoclasses. Only CSS solution required

Question

How have can I set styles for the last list element of the nested list. I want these styles to be applied only to elements with the class "match".

Here is the code example:

HTML:

<ul>
    <li>
        <ul>
            <li class="match">x1 match</li>
            <li class="match">y1 match</li>
            <li>z1</li>
        </ul>
    </li>
    <li>
        <ul>
            <li>x2 match</li>
            <li class="match">y2 match</li>
            <li>z2</li>
        </ul>
    </li>
    <li>
        <ul>
            <li class="match">x3 match</li>
            <li class="match">y3 match</li>
            <li class="match">y3 match</li>
        </ul>
    </li> 
</ul>

CSS:

ul li ul li:last-of-type {
    color: red;
}

http://jsfiddle.net/RYz6e/1/

To be specific in this example I want next items to be selected:

y1 match
y2 match
y3 match

Thank you

More info at - http://stackoverflow.com/questions/7298057/css-last-child-selector-select-last-element-of-specific-class-not-last-child-i — Kunj, Apr 28 '14 at 11:40
I don't want to add extra class. Is there a pure CSS solution? — And1, Apr 28 '14 at 11:42
No, unfortunately not. In Selectors Level 4 there's `:nth-match()`, but it's not yet implemented in most (possibly any) browsers. — David Thomas, Apr 28 '14 at 11:43
As @Paulie_D said the CSS selector you are looking for doesn't exist. Either you add a specific class to the elements either you will need JS to select your elements. — web-tiki, Apr 28 '14 at 11:43
I don't know if this is what you want.. http://jsfiddle.net/MarmeeK/PjuUz/ please be more clear and elaborative — MarmiK, Apr 28 '14 at 12:12
http://jsfiddle.net/RYz6e/7/ If more elements come, this won't work — Leo T Abraham, Apr 28 '14 at 12:13

Leo T Abraham · Answer 1 · 2014-04-28T12:14:51.660

0

Try this:

ul li ul .match:nth-of-type(even)
{
    color: red;
}

Fiddle

This won't work if more elements come.

edited Apr 28 '14 at 12:14

answered Apr 28 '14 at 11:43

Leo T Abraham

2,407
4
28
54

No, there is *no* 'pure solution...with CSS,' (was that a typo?) and if you're suggesting jQuery (why not plain JavaScript?) then at least offer that solution. – David Thomas Apr 28 '14 at 11:46
@DavidThomas I have found a solution. But it will not work if more elements come. – Leo T Abraham Apr 28 '14 at 12:15

score -2 · Answer 2 · answered Apr 28 '14 at 11:37

-2

try to like below using css3

ul li:last-child
    {
    color: red;
    }

answered Apr 28 '14 at 11:37

Senthilkumar Govindasamy

145
9

This doesn't answer the question, and `:last-child` is css 2.1, not 3. – David Thomas Apr 28 '14 at 11:39
tell clearly what you need exaclty – Senthilkumar Govindasamy Apr 28 '14 at 11:40
Had I asked the question, I would have. – David Thomas Apr 28 '14 at 11:42
3

"tell clearly what you need exaclty" - I listed elements to be selected in the question. – And1 Apr 28 '14 at 11:47
@DavidThomas: shall we use jquery for this solution? – Senthilkumar Govindasamy Apr 28 '14 at 11:47
Ask the OP, @And1; it's his decision not mine. – David Thomas Apr 28 '14 at 11:48

score -2 · Answer 3 · answered Apr 28 '14 at 11:37

-2

Or you could use:

ul .match {
color: red;
}

For a shorter notation.

answered Apr 28 '14 at 11:37

Anwardo

650
5
15

CSS lists and preudoclasses. Only CSS solution required

3 Answers3