Return to Answer

As others have mentioned, it is working as expected, the first child of the parent.

The :first-child selector is used to select the specified selector, only if it is the first child of its parent.

Source: CSS :first-child Selector

You can reach the first .blue like this:

.red + .blue

or if you want to get all the .blue after .red

.red ~ .blue

You might want to use :first-of-type which selects the first of a type but then those .blue would have to be a different HTML element.

div.red:first-of-type {
    color:#F00;
}
div.red:last-of-type {
    color:#00F;
}
p.blue:first-of-type {
    color:#F00;
}
p.blue:last-of-type {
    color:#00F; 
}

<div>
    <div class="red">one</div>
    <div class="red">two</div>
    <div class="red">three</div>
    <p class="blue">one</p>
    <p class="blue">two</p>
    <p class="blue">three</p>
</div>

As others have mentioned, :first-child is working as expected, as the first child of the parent.

The :first-child selector is used to select the specified selector, only if it is the first child of its parent.

Source: CSS :first-child Selector

You can reach the first .blue like this:

.red + .blue

or if you want to get all the .blue after .red

.red ~ .blue

You might want to use :first-of-type which selects the first of a type but then those .blue would have to be a different HTML element.

div.red:first-of-type {
    color:#F00;
}
div.red:last-of-type {
    color:#00F;
}
p.blue:first-of-type {
    color:#F00;
}
p.blue:last-of-type {
    color:#00F; 
}

<div>
    <div class="red">one</div>
    <div class="red">two</div>
    <div class="red">three</div>
    <p class="blue">one</p>
    <p class="blue">two</p>
    <p class="blue">three</p>
</div>

As others have mentioned, it is working as expected, the first child of the parent.

You can reach the first .blue like this:

.red + .blue

or if you want to get all the .blue after .red

.red ~ .blue

You might want to use :first-of-type which selects the first of a type but then those .blue would have to be a different HTML element.

span:first-of-type {
    color:#F00;
}
span:last-of-type {
    color:#00F; /* not working */
}
p:first-of-type {
    color:#F00; /* not working */
}
p:last-of-type {
    color:#00F; 
}

<div>
    <span class="red">one</span> <!-- This is the first child of red -->
    <span class="red">two</span>
    <span class="red">three</span>
    <p class="blue">one</p> <!-- and this first child of blue -->
    <p class="blue">two</p>
    <p class="blue">three</p>
</div>

As others have mentioned, it is working as expected, the first child of the parent.

The :first-child selector is used to select the specified selector, only if it is the first child of its parent.

Source: CSS :first-child Selector

You can reach the first .blue like this:

.red + .blue

or if you want to get all the .blue after .red

.red ~ .blue

You might want to use :first-of-type which selects the first of a type but then those .blue would have to be a different HTML element.

div.red:first-of-type {
    color:#F00;
}
div.red:last-of-type {
    color:#00F;
}
p.blue:first-of-type {
    color:#F00;
}
p.blue:last-of-type {
    color:#00F; 
}

<div>
    <div class="red">one</div>
    <div class="red">two</div>
    <div class="red">three</div>
    <p class="blue">one</p>
    <p class="blue">two</p>
    <p class="blue">three</p>
</div>

As others have mentioned, it is working as expected, the first child of the parent. What you are referring to is :first-of-type which selects the first of that type.

As others have mentioned, it is working as expected, the first child of the parent.

You can reach the first .blue like this:

.red + .blue

or if you want to get all the .blue after .red

.red ~ .blue

You might want to use :first-of-type which selects the first of a type but then those .blue would have to be a different HTML element.

span:first-of-type {
    color:#F00;
}
span:last-of-type {
    color:#00F; /* not working */
}
p:first-of-type {
    color:#F00; /* not working */
}
p:last-of-type {
    color:#00F; 
}

<div>
    <span class="red">one</span> <!-- This is the first child of red -->
    <span class="red">two</span>
    <span class="red">three</span>
    <p class="blue">one</p> <!-- and this first child of blue -->
    <p class="blue">two</p>
    <p class="blue">three</p>
</div>