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

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.