it-swarm-pt.tech

o primeiro filho não trabalha

Se isso funcionar, estou ficando louco?

.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 funciona bem, research:first-child não cola. Alguma ideia?

Demo Não funciona, mas qual é a melhor maneira de fazer isso?

15
uriah

:first-child seleciona apenas o primeiro filho de seu pai. Nada mais.

Conforme mencionado em algumas das minhas outras respostas no site ( 124 ), não há :first-of-class pseudo-classe. Se você estiver procurando aplicar estilos ao primeiro de cada classe de seus elementos div, uma solução é aplicar os estilos a todos os filhos dessa classe e um seletor geral de irmãos para desfazer os estilos dos irmãos subsequentes.

Seu CSS ficaria assim:

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

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

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

De especificação :

O mesmo que :nth-child(1). O :first-child pseudo-classe representa um elemento que é o primeiro filho de algum outro elemento.

.project.research não é o primeiro filho de seu pai.

1
Felix Kling

Eu acredito que você quer este CSS:

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

ou

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

violino atualizado

Isso corresponde ao primeiro filho de um elemento com as classes "projeto" e "trabalho" (ou "projeto" e "pesquisa"). Você não tem que usar p:first-child se não for um elemento p, você pode usar *:first-child em vez de.

0
T.J. Crowder