Skip to main content

Return to Question

Post Closed as "Duplicate" by Salman Arshad css
added 30 characters in body
Source Link
Muhammad Omar ElShourbagy
Muhammad Omar ElShourbagy
  • 7k
  • 2
  • 33
  • 50

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>

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>

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>

deleted 13 characters in body; edited title
Source Link
dda
dda
  • 6.2k
  • 2
  • 26
  • 34

css Doesn't CSS first-child or last-child is not workingwork with class wise?

May beMaybe this question is ridiculous, but i justI want to know this fact. iI have a li element with two class like theclasses (see below code), but it is not working as iI expected,. Does anybody know what is 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>

css first-child or last-child is not working with class wise?

May be this question is ridiculous, but i just want to know this fact. i have li with two class like the below code but is not working as i expected, anybody know what is 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>

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

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>

Source Link
Jishnu V S
Jishnu V S
  • 8.3k
  • 7
  • 28
  • 58

css first-child or last-child is not working with class wise?

May be this question is ridiculous, but i just want to know this fact. i have li with two class like the below code but is not working as i expected, anybody know what is 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>