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
Post a Comment