CODEWITHSUNDEEP
csscss-selectors
esther h
esther h

Reputation: 1468

possible bug with first-child selector?

I found a possible bug (at least, I'm not sure what is wrong!).

I have 5 spans. All except the first have a class of total_breakdown. I gave some styling to that class, and then added specific styling to the first-child element - namely, changing the color.

.total_breakdown {
    color: #727272;
    font-size: 14px;
    padding: 0 10px 0 2px;
}
.total_breakdown:first-child {
   color:black;
}

This doesn't work - the first span with the .total_breakdown class remains the same grey as the others. Now, here is the interesting part - if I delete the first span (without the total_breakdown class name), it works fine. seems buggy to me...

For a specific example, see here

just wanted to add, I tested this on latest FF and Chrome with same results

Upvotes: 0

Views: 55

Answers (2)

David Thomas
David Thomas

Reputation: 253506

So, while this is how it's meant to work, may I offer a work around for you:

.total_breakdown {
    color: black;
    font-size: 14px;
    padding: 0 10px 0 2px;
}
span, /* styles the spans preceding the first .total-breakdown */
.total_breakdown ~ .total_breakdown { /* styles all .total-breakdown elements */
   color: #727272;                       that follow a .total-breakdown element */
}

demo.

References:

Upvotes: 2

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201896

Works as defined, because .total_breakdown:first-child does not mean “first child that belongs to class .total_breakdown” but “an element that is the first child of its parent and additionally belongs to class .total_breakdown”. There is no “first of a class” selector in CSS.

Upvotes: 4

Related Questions