: первый-ребенок влияет на других дочерних элементы

Question

у меня есть это в моем файле SASS:

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

Стрелки ребенок, страдающий от padding, хотя. Мне просто нужен первый ребенок внутри родителя .button.

Я также попытался это:

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

Answer 1

Ваше первое решение:

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

По существу превращается из этого правила:

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

Это будет иметь точно такой эффект, который вы описывая - каждый :first-child в иерархии под .buttons будет затронуто.

Ваше второе решение:

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

Превращается из этого правила:

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

Это будет влиять только .buttons себя, и только если это :first-child в пределах его родителей.

Что я думаю вы ищете:

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

Это будет влиять на первый элемент, независимо от типа, который существует в .buttons.