Почему не срабатывает :first-child?

Question

[andreyqin]

Всем добрый день! Вот код - jsfiddle.net/9aLSp . На 25-ой строчке с помощью :first-child пытаюсь убрать верхнюю рамку у блока, но псевдокласс почему-то не хочет работать. Например, с помощью JQuery элемент находит: $('.action_block:first'). Не могу понять в чем проблема. Если кому не сложно - укажите на ошибку.

Answer 1

[akashtrih]

jsfiddle.net/shtrih/9aLSp/1

.action_block:first-of-type {
	border-top: 0;
	padding-top: 5px;
}

У тебя .action_block не является первым дочерним элеменом блока .action_wrapper, поэтому :first-child не срабатывал.

Comments

[andreyqin]

То есть, первым дочерним являлся h3? У него тоже есть background, почему тогда он не убирался? И почему на JQuery :first срабатывал так, как мне нужно?

[akashtrih]

А причем тут background? Его нет у .action_block и нет в .action_block:first-of-type.
Псевдоселектор JQuery :first работает иначе, чем селектор first-child, во-первых. Во-вторых, :first применялся к выборке .action_block. То есть было $('.action_block:first'), а не $('.action_wrapper :first')

[Александр Петров]

Вы находите всех "первых детей", затем среди них выбираете тот, который имеет класс .action_block. :first jQuery работает наоборот, сначала все .action_block находятся и среди них берется первый. В jQuery есть и first-child, которые работает так же, как и в css.

[andreyqin]

@akashtrih, извините, ошибся по поводу background, просто в рабочем варианте я как раз его обнуляю у первого .action_block.

Answer 2

[Rasul Gudantov]

В общем ещё может быть такое что вы обращаетесь к первому элементу по его тегу, но этот тег стоит вторым, то тогда нужно обращаться уже ко второму тегу. :nth-child(2)



в данном случае было обращение к

.option label:first-child {
	margin-left: 0;
}

и в итоге не работало потому что сам label хоть и первый, но при этом он второй в самом родительском классе.
Получается нужно вот так

.option label:nth-child(2) {
	margin-left: 0;
}

Answer 3

[Krickt]

Уберите h3 и все заработает! :)