Первый ребенок не работает

Question

Если эта работа, я схожу с ума?

.project.work:first-child:before {
  content: 'Projects';
}
.project.research:first-child:before {
  content: 'Research';
}

<div class="project work">
  <p>abcdef</p>
</div>
<div class="project work">
  <p>abcdef</p>
</div>
<div class="project work">
  <p>abcdef</p>
</div>
<div class="project research">
  <p>abcdef</p>
</div>

projects:first-child работает отлично, research:first-child не прилипает Есть идеи?

Демо Это не работает, но как лучше всего этого добиться?

Answer 1

:first-child только выбирает первого потомка своего родителя. Ничего больше.

Как уже упоминалось в нескольких других моих ответах на сайте ( 1 2 3 4), нет :first-of-class псевдо-класс. Если вы хотите применить стили к первому из каждого класса вашего div элементы, решение состоит в том, чтобы применить стили ко всем дочерним элементам этого класса, и общий селектор брата, чтобы отменить стили от последующих братьев и сестер.

Ваш CSS будет выглядеть так:

.project.work:before {
    content: 'Work';
}

.project.research:before {
    content: 'Research';
}

.project.work ~ .project.work:before, 
.project.research ~ .project.research:before {
    content: none;
}

Answer 2

Из спецификации:

Такой же как :nth-child(1), :first-child псевдокласс представляет элемент, который является первым потомком некоторого другого элемента.

.project.research не первый ребенок своего родителя.

Answer 3

Я считаю, что вы хотите этот CSS:

.project.work p:first-child:before {content:'Projects';}
.project.research p:first-child:before {content:'Research';}

или же

.project.work > p:first-child:before {content:'Projects';}
.project.research > p:first-child:before {content:'Research';}

Обновленная скрипка

Это соответствует первому дочернему элементу с классами "проект" и "работа" (или "проект" и "исследование"). Вам не нужно использовать p:first-child если это не может быть p элемент, вы могли бы использовать *:first-child вместо.