Почему селектор + не работает?

Question

[Alibek Kulseitov]

<div class="phone-top">
			<p><span>+7 (727)</span> xxxxxx</p>   
			<p><span>+7 (777)</span> xxxxxx</p>  				
			<a class="button magnificPopup" href="#callback" data-formname="заказать звонок">заказать звонок</a>
		</div>

.phone-top p{
	font-size: 18px;
	color: #fff;
	line-height: 21px;
	margin: 0;
}
.phone-top + p{
	font-size: 28px;
}

Не работает условие для первого параграфа.

Answer 1

[Serj-One]

Потому что у бока .phone-top нет соседнего p
Используйте:fist-of-type или :nth-of-type()для p.
Ну или:fist-of-child или :nth-of-child() для .phone-top.

В вашем случае -

.phone-top p:fist-of-type{
    ...
}

Или

.phone-top:fist-child{
    ...
}

Comments

[Alibek Kulseitov]

А точно, то есть плюс работает на соседние. А как сделать чтобы оно сработало для дочернего элемента да и к тому же выборочный элемент?
.phone-top > p ? Так ведь будет для всех элементов P. А мне нужно именно для первого. Надо nth-child использовать??

[Serj-One]

Алибек Кулсеитов: Уже обновил ответ.