css - :first-child affecting other child elements -

i have in sass file:

.buttons {     :first-child {         padding-top:7px;     } } 

html:

<div class="buttons">   <div>     <label>       <input type="checkbox">       bla blaa     </label>   </div>   <div>     <a class="advance">step2</a>     <button class="btn">help <i class="arrow"></i></button>   </div> </div> 

the arrow child being affected padding, though. want first child inside parent .button.

i have tried this:

.buttons {     &:first-child {         padding-top:5px;     } } 

your first solution:

.buttons {     :first-child {         padding-top: 7px;     }  } 

essentially turns rule:

.buttons *:first-child { padding-top: 7px; } 

this going have effect you're describing - every :first-child in hierarchy under .buttons going affected.

your second solution:

.buttons {     &:first-child {         padding-top: 5px;     } } 

turns rule:

.buttons:first-child { padding-top: 5px; } 

this going affect .buttons itself, , if :first-child within it's parent.

what think looking is:

.buttons > *:first-child { padding-top: 5px; } 

this affect first element, regardless of type, exists within .buttons.