pierwsze dziecko nie pracuje

Question

Czy to jest praca, w której zwariowałem?

.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 działa dobrze, research:first-child nie przykleja. Jakieś pomysły?

Demo To nie działa, ale jaki jest najlepszy sposób, aby to osiągnąć?

Answer 1

:first-child tylko wybiera pierwsze dziecko swojego rodzica. Nic więcej.

Jak wspomniano w kilku innych moich odpowiedziach na miejscu (1234), nie ma :first-of-class Pseudo-klasa. Jeśli chcesz zastosować style do pierwszej z każdej klasy elementów div, rozwiązaniem jest zastosowanie stylów do wszystkich dzieci z tej klasy oraz ogólny selektor dla rodzeństwa, aby cofnąć style od kolejnych rodzeństwa.

Twój CSS będzie wtedy wyglądać tak:

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

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

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

Answer 2

Z specification:

samo jak :nth-child(1). Pseudo-klasa :first-child reprezentuje element będący pierwszym dzieckiem innego elementu.

.project.research nie jest pierwszym dzieckiem rodzica.

Answer 3

wierzę chcesz to CSS:

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

lub

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

Updated fiddle

który pasuje do pierwszego dziecka z element z klas "projekt" i „pracy "(lub" projekt "i" badania "). Nie musisz używać p:first-child, jeśli nie jest to element p, możesz zamiast tego użyć *:first-child.