Clever Geek Handbook

CSS: first child of children with 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 am applying some CSS styling and among 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 box is applied correctly, the space between the entire "note" range is about 5px, but I would like to put the margin to the left on the first span with a class "note" 25px, however the first -child doesn't 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, the whole range is split into 25 pixels (left) except for the first one. I'm guessing it has something to do with the class, but I've looked around the internet and it seems to be the correct syntax.

thank

+3


source to share


4 answers


The first is span.note

not the first child .statistics

, so span.note:first-child

it won't match. The first child is one span

that has no class .note

, so only a selector span:first-child

without a class will match that child.

Using the method described here , apply the left margin to all children span.note

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


source


you can directly match the first element span.note

like

/* 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

+5


source


You don't seem to understand :first-child

. This whole selector asks, " Am I my parent's first child? " - nothing else. None of you span.note

do it.

0


source


Try using this property

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


source






More articles:


All Articles