separadora - linea vertical html css

primer hijo no funciona

Question

¿Debería este trabajo estar volviéndome loco?

.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 bien, la research:first-child no se pega. ¿Algunas ideas?

Demostración No funciona, pero ¿cuál es la mejor manera de lograr esto?

Answer 1

Creo que quieres este CSS:

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

o

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

Fiddle actualizado

Eso coincide con el primer hijo de un elemento con las clases "proyecto" y "trabajo" (o "proyecto" e "investigación"). No tiene que usar p:first-child si no puede ser un elemento p , podría usar *:first-child lugar.

Answer 2

De la especificación :

Lo mismo que :nth-child(1) . La :first-child representa un elemento que es el primer hijo de algún otro elemento.

.project.research no es el primer hijo de su padre.

Answer 3

:first-child solo selecciona el primer hijo de su padre. Nada más.

Como mencioné en algunas de mis otras respuestas en el sitio ( 1 2 3 4 ), no hay :first-of-class pseudoclase. Si está buscando aplicar estilos al primero de cada clase de sus elementos div , una solución es aplicar los estilos a todos los niños de esa clase, y un selector general de hermanos para deshacer los estilos de los hermanos posteriores.

Su CSS se vería así:

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

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

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