CODEWITHSUNDEEP
htmlcsscss-selectors
ssougnez
ssougnez

Reputation: 5886

CSS: First child of children with a class

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

Upvotes: 3

Views: 13328

Answers (4)

BoltClock
BoltClock

Reputation: 724462

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;
}

Upvotes: 10

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123428

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

Upvotes: 6

connexo
connexo

Reputation: 56813

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.

Upvotes: 0

Raj Rana
Raj Rana

Reputation: 90

Try important to this property

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

Upvotes: -1

Related Questions