nth-child selector unable to select last child

Question

Below is my html code where I am having four span under a paragraph and I want to do different stylings for them.

HTML MARKUP:

<div class="logobar">
    <p>
    <span>Heading text </span><span class="glyphicon glyphicon-chevron-right"></span><span>Audit Creation</span>
    <font class="pull-right">[email protected]<span class="glyphicon glyphicon-chevron-down"></span></font>
    </p>
</div>

So, for applying css to all children I am using the nth-child selector. And when I do so the first 3 span are getting their css but the fourth one is using the css of 1st child. I don't know why?

CSS:

.logoBar p span:nth-child(1){
    font-family:ubuntuBold;
    font-size:24px; 
}
.logoBar p span:nth-child(2){
    margin: 0 18px; 
}
.logoBar p span:nth-child(3){
    font-family:ubuntuMedium;
    font-size:18px; 
}
.logoBar p span:nth-child(4){
    margin:0 18px;
}

My guess:

I think it is because I am having the last span inside of font tags and is thus not a direct children to paragraph. And I should use the following css to do so:

.logoBar p font span:nth-child(1){
        margin:0 18px;
 }

Correct me if I am wrong with some standard solutions.

Answer 1

Your guess is correct. nth-child works relative to it's parent, and as it's parent is the <font> tag, it is the first child (and also last), but not fourth.

.logoBar p *:last-child span{
    margin:0 18px;
}

To get around the fact that it is also a span that is a first child, change all you other ones to be so that they are only a direct child of the paragraph tag

.logoBar p>span...

Answer 2

just the thing you need to select you last span is like shown

.logoBar p font span{
    margin:0 18px;	
}

and one thing you need to see you want to apply style of span's elements that you have given to you last one

so i tried simple one as it may help to you what to wan to do.

.logoBar p font span{
    margin:0 18px;
	color :red;	
}

<div class="logobar">
    <p>
    <span>Heading text </span><span class="glyphicon glyphicon-chevron-right"></span><span>Audit Creation</span>
    <font class="pull-right">[email protected]<span class="glyphicon glyphicon-chevron-down">whats aappppp</span></font>
    </p>
</div>