CODEWITHSUNDEEP
csscss-selectors
Kiran Dash
Kiran Dash

Reputation: 4956

nth-child selector unable to select last child

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.

Upvotes: 3

Views: 372

Answers (3)

Amanjot
Amanjot

Reputation: 2058

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

Yes, you are correct. Its because of the font. The logoBar is not able to find the fourth child because of the font tag which is disturbing the hierarchy. So, you need to include font in your class and also the nth child number. Also, plz chnage the class name logobar to logoBar in your HTML code.

Upvotes: 1

cameronjonesweb
cameronjonesweb

Reputation: 2506

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...

Upvotes: 3

Himesh Aadeshara
Himesh Aadeshara

Reputation: 2121

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>

Upvotes: 1

Related Questions