У меня не первый раз first-child в Brackets просто не работает, может у кого-то тоже?

Question

[Вадим]

так работает:
.story {
display: block;
float: left;
width: 50%;
line-height: 1.6;
span {
display: block;
float: left;
}
p:last-child {
margin-left: 110px;
margin-top: 1px;
}
p:not(:last-child) {
color: #e74c3c;
}
}

а так нет:
.story {
display: block;
float: left;
width: 50%;
line-height: 1.6;
span {
display: block;
float: left;
}
p:first-child {
color: #e74c3c;
}
p:last-child {
margin-left: 110px;
margin-top: 15px;
}
}
скрин
https://pp.vk.me/c836731/v836731612/f4cf/PS820oKMq...

Answer 1

[iBird Rose]

может потому что он не первый? html покажи

Comments

[Вадим]

менял местами и так и так не работает

[iBird Rose]

Вадим: хтлм все же покажи. толку от примера css без хтмл

[Вадим]

iBird Rose: ссылку прикрепил

[iBird Rose]

Вадим: ну я же сказал что твой p не первый. то что ты указал p:first-child - не значит что он не считает впереди стоящие span и h1. итого твой p уже 3. тобишь юзай nth-child(3)

[Вадим]

iBird Rose: уже понял, спасибо, вечно путаю. это он по типу будет первый. еще и препроцессор сбивает. на разметку нужно смотреть..

[devstudent]

iBird Rose: а если вследствие каких-то изменений он перестанет быть именно третим? переписывать, код ? это НЕ универсальный вариант

[iBird Rose]

devstudent: тогда засовываешь свои p в какой нить div. где будут только p. и тогда уже внутри него - p:first-child точно будет первым

[devstudent]

iBird Rose: тогда не городишь костыль, как вы предлагаете, а используешь специально для таких случаев задуманный селектор :first-of-type.

Answer 2

[Ivan Bogachev]

Вы просто не понимаете что такое :first-child. Вот вам пример для размышлений. А в вашем случае нужно использовать :first-of-type.

Answer 3

[Павел]

Использовать можно :last-of-type и также есть подозрение что дело в Доктайпе

Comments

[Вадим]

использую тоже. но сам факт: хочу именно ферст-чайлд.

Answer 4

[devstudent]

а если попробовать :first-of-type , который ищет 1-ый элемент именно данного типа то есть тег /p> у родителя, может перед ним есть другой элемент, поэтому ваш селектор и не находит то что вы хотите

Comments

[Вадим]

по типу работать будет. ну я scss-ом пишу

[devstudent]

Вадим: так я же и говорю о css-селекторе

[devstudent]

Вадим: я вам говорю о ДРУГОМ селекторе, обратите внимание, они разные