Doesn't CSS first-child or last-child work with class wise? [duplicate]

Question

Maybe this question is ridiculous, but I want to know this fact. I have a li element with two classes (see below), but it is not working as I expected. Does anybody know the reason?

.red:first-child {
    color:#F00;
}
.blue:first-child {
    color:#00F; /* not working */
}
.red:last-child {
    color:#F00; /* not working */
}
.blue:last-child {
    color:#00F; 
}

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

Answer 1

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>

Answer 2

Because It consider Li list. First you have to mention first-childs so take first command to show red. THen Take last code as blue last-child so take last code to show blue.

It not consider the red and blue class orders. It consider li list and periorities.

Answer 3

It doesn't work because what you said to the browser was (for the red case, the blue one is similar):

1. Locate all elements .red.
2. From that list of .red elements, pick the first one (first-child).
3. Apply the red color to it.

The browser works as expected and apply the red color to the first element of the list.

EDIT:

The blue case is due to the fact that CSS always looks for the most precise rule. If both rules has the same precision level, the last one wins, so in this case, the last .blue:last-child wins and the .blue:first-child is ignored.