How to choose the first class by class that comes after a similar element without a class?

Question

How can I select the first element with a class of "red" (first) in this construct?

HTML:

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

+3

inser Feb 07 '14 at 11:51

3 answers

Ok, not very pretty, but does the job:

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

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

+1

Varinder Feb 07 '14 at 11:57

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

0

Kaptan Feb 07 '14 at 12:17

Vegetablea · Accepted Answer · 2014-02-07T11:57:31+0000

try it.

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