css - nth-child selector unable to select last child -


below html code having 4 span under paragraph , want different stylings 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">matt@heller.com<span class="glyphicon glyphicon-chevron-down"></span></font>     </p> </div> 

so, applying css children using nth-child selector. , when first 3 span getting css fourth 1 using css of 1st child. 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 because having last span inside of font tags , not direct children paragraph. , should use following css so:

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

correct me if wrong standard solutions.

your guess correct. nth-child works relative it's parent, , it's parent <font> tag, first child (and last), not fourth.

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

to around fact span first child, change other ones direct child of paragraph tag

.logobar p>span... 

Comments

Popular posts from this blog

OpenCV OpenCL: Convert Mat to Bitmap in JNI Layer for Android -

android - org.xmlpull.v1.XmlPullParserException: expected: START_TAG {http://schemas.xmlsoap.org/soap/envelope/}Envelope -

python - How to remove the Xframe Options header in django? -