CSS: First child of children with a class

Question

I have the following HTML:

<div class="statistics">
    <span class="glyphicon glyphicon-calendar"></span>19/06/2015
    <span class="glyphicon glyphicon-eye-open"></span> 18 lectures
    <span class="glyphicon glyphicon-comment"></span> 1 commentaire
    <span class="glyphicon glyphicon-user"></span> Sébastien Sougnez
    <span class="glyphicon glyphicon-heart note"></span>
    <span class="glyphicon glyphicon-heart note"></span>
    <span class="glyphicon glyphicon-heart note"></span>
    <span class="glyphicon glyphicon-heart note"></span>
    <span class="glyphicon glyphicon-heart-empty note"></span>
</div>

I'm applying some CSS style and amongst them, I have this :

.article .statistics span.note {
    margin-left:0px;
    margin-right:5px;
}

.article .statistics span.note:first-child {
    margin-left:25px;
}

The first CSS block is correctly applied, the space between all "note" span is about 5px but I'd like to put a margin-left on the first span with the "note" class of 25px, however, the first-child does not seem to select the element which is weird because I also have this CSS :

.article .statistics span {
    margin-left:25px;
    margin-right:5px;
}

.article .statistics span:first-child {
    margin-left:0px;
}

And here, it works fine, all span are separated by 25px (on the left) except the first one. I guess it has something to do with the class but I looked over the Internet and this seems to be the correct syntax.

Thanks

.article .statistics span:first-child { margin-left:0px; } this will remove your 25px margin — Keval Bhatt, Jun 30 '15 at 11:50
Hi, I don't see why... However, I removed it (actually it looks better without) and I still have the issue. This selector was for the first span of the div, what I want is a selector for the first span with the "class" note. — ssougnez, Jun 30 '15 at 11:52

score 10 · Accepted Answer · edited May 23 '17 at 10:26

10

The first span.note is not the first child of .statistics, so span.note:first-child will not match. The first child is a span that doesn't have the .note class, so only the span:first-child selector without the class will match, on that child element.

Using the technique described here, apply the left margin to all span.note children and then remove it from subsequent ones, instead of trying to apply it separately to the first one:

.article .statistics span.note {
    margin-left:25px;
    margin-right:5px;
}

.article .statistics span.note ~ span.note {
    margin-left:0px;
}

edited May 23 '17 at 10:26

Community

1
1

answered Jun 30 '15 at 11:55

BoltClock

700,868
160
1,392
1,356

Remember to omit the unit when applying a `0` value to a property. – connexo Jun 30 '15 at 12:00
@connexo: Why does one need to remember to do that? Does leaving the unit in have unintended side effects? – BoltClock Jun 30 '15 at 12:03
2

It saves two bytes! That's gotta be valuable. :) – Paulie_D Jun 30 '15 at 12:05
@connexo: Also, that should be "when applying a 0 length", because only accepts unitless zeroes (besides ) - no other quantity does. – BoltClock Jun 30 '15 at 12:11
@Paulie_D with my answer you don't even need to reverse the margin :) – Fabrizio Calderan Jun 30 '15 at 12:12
@Paulie_D: Oh yeah, why didn't I think of that? :) – BoltClock Jun 30 '15 at 12:12
@Fabrizio Calderan: That is true. The OP still needs the general rule for margin-right though, which is why I figured I'd use this technique instead to make use of the general rule. But I did +1 yours. – BoltClock Jun 30 '15 at 12:12

Fabrizio Calderan · Answer 2 · 2015-06-30T12:01:13.737

6

you can straight match the first span.note element, like so

/* when it is exactly the first child of its parent 
 * (not your specific case)
 */
span.note:first-child,  

/* when it is not the first-child, and then is 
 * preceded by another span whose class is not ".note"
 */
span:not(.note) + span.note {
    margin-left: 25px;
}

Codepen Example: http://codepen.io/anon/pen/WvdqbR

edited Jun 30 '15 at 12:01

answered Jun 30 '15 at 11:55

Fabrizio Calderan

120,726
26
164
177

score 0 · Answer 3 · answered Jun 30 '15 at 11:56

0

You don't seem to understand :first-child. All this selector asks is "Am I the first child of my parent?" - nothing more. None of you span.note fulfills this.

answered Jun 30 '15 at 11:56

connexo

53,704
14
91
128

score -1 · Answer 4 · answered Jun 30 '15 at 11:54

-1

Try important to this property

.article .statistics span:first-child {
    margin-left:0px !important;
}

answered Jun 30 '15 at 11:54

Raj Rana

90
6

CSS: First child of children with a class

4 Answers4