0

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

esther h
  • 1,468
  • 2
  • 17
  • 35

2 Answers2

4

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.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • 1
    Lesson: never assume it's a bug until you're absolutely sure you know how something is supposed to work. It can't be stressed enough. – BoltClock Nov 04 '12 at 10:51
  • all right, that's why I said possible bug, was assuming there was info I didn't know... – esther h Nov 04 '12 at 12:49
2

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:

David Thomas
  • 249,100
  • 51
  • 377
  • 410
  • More info: http://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class/8539107#8539107 – BoltClock Nov 04 '12 at 10:53
  • You're very welcome! Bear in mind this answer was intended to supplement Jukka's (I just choose not to repeat his explanation, as repetition seems unnecessary). But I'm glad to have been of help. =) – David Thomas Nov 04 '12 at 13:01