не работает first-child

Во-первых, id должны быть уникальны и не повторяться на странице. Но к вопросу по css это отношения не имеет. Вот если бы вопрос был про js, то там замечательные фокусы могут получаться.

:first-child применяется к элементу, который в разметке является первым потомком своего родителя и работает отлично и кроссбраузерно, причём очень давно. Следовательно, если он не работает, то элемент не является первым потомком.

Открой девтулы и посмотри, какая разметка у тебя получилась.

Я надеюсь, что прежде чем задавать вопрос, ты хотя бы в коде убедился, что элемент является первым потомком. В таком случае расхождение между твоим кодом и реальной dom-структурой вызвано тем, что твой html невалиден и правила парсинга заставляют браузер сделать что-то неожиданное.

На вскидку могу представить 3 такие ситуации:

• Элемент является первым в body, но в head есть элементы, которых там быть не должно (p, div). В таком случае браузер закрывает head и начинает body автоматически, а открывающий тег body игнорируется.
• Ты кладёшь div внутрь p. В таком случае p немедленно закрывается и div идёт за ним.
• Ты кладёшь div непосредственно в список (вместо li) или в таблицу (вместо тела, строки или ячейки). Не уверен, но кажется такие элементы выкидываются за пределы того, в чём они написаны.