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

Должна ли эта работа сходить с ума?

.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>

Ответы

Ответ 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;
}

Ответ 2

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

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

.project.research не является первым дочерним элементом его родителя.

Ответ 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.