How to select the first child by class that goes after similar element without class?

Question

How can I select the first element with class "red" (First) in this construction?

HTML:

<div class='container'>
    <p>Zero</p>
    <p class="red">First</p>
    <p class="red">Second</p>
</div>

There is a css tag in the question so i'm assuming he aims for a css only solution. — markusthoemmes, Feb 07 '14 at 11:55
possible duplicate of: http://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-classnth-of-, there is also a quite detailed answer, see here: http://stackoverflow.com/a/8539107/3269863 — markusthoemmes, Feb 07 '14 at 11:58
Damn, feeling like a css ninja as my approach was quiet similar lol. Thanks for like @Marguez :) — Varinder, Feb 07 '14 at 12:00
This may be of help http://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class — EmileKumfa, Feb 07 '14 at 12:02
From [this aswer](http://stackoverflow.com/a/13287975/1763929) -> [Fiddle](http://jsfiddle.net/Vq8PB/73/) — Vucko, Feb 07 '14 at 12:03
@Vucko strange how it's almost exactly the same question, with similar code. — Xareyo, Feb 07 '14 at 12:06

score 1 · Accepted Answer · answered Feb 07 '14 at 11:57

1

try this..

.container .red:nth-child(2)
{
color: red;
}

answered Feb 07 '14 at 11:57

Vegeta

1

Ok. Works for this situation. But if I have a lot of p elements without class before first "red"? – inser Feb 07 '14 at 11:59
Let's me explain why this answer won: it did what I need - select required element using ONE css expression – inser Feb 10 '14 at 08:44

score 1 · Answer 2 · answered Feb 07 '14 at 11:57

1

Ok, not very pretty but does the job:

.container p + p.red {
    color: red;
}

.container p + p.red ~ p {
    color:black; /*reverting back*/
}

answered Feb 07 '14 at 11:57

Varinder

score 0 · Answer 3 · answered Feb 07 '14 at 12:17

0

.container p[class=red]:nth-child(2)
        {
            color: red;
        }

answered Feb 07 '14 at 12:17

Kaptan

3 Answers3