first-child no funciona

¿Debería este trabajo volverme loco?first-child no funciona

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

Demo No funciona, pero ¿cuál es la mejor manera de lograrlo?

Fuente

2011-12-16 uriah

': primera child' sólo se selecciona el primer hijo. Nada más. – BoltClock

.project.research: first-child Sin embargo, ¿no es el primero de su tipo? – uriah

Lo es, pero no es el primer hijo de su padre. – BoltClock

:first-child solo selecciona el primer elemento secundario de su elemento primario. Nada más.

Como se menciona en algunas de mis otras respuestas en el sitio (1 2 3 4), no hay pseudo-clase :first-of-class. 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 tendría el siguiente aspecto:

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

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

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

Fuente

2011-12-16 14:47:39 BoltClock

No hay una manera en CSS puro de aplicar esto dinámicamente (es decir, sin tener que codificar las clases adicionales si decide agregar más más tarde). Una vez que agregue más clases, debe agregarlas a su CSS manualmente en este patrón. – BoltClock

Perfecto, aplicar a todos y deshacer hermanos. Gracias @boltclock Entonces, si yo hubiera agregado otra clase como '.project.photography' ¿no funcionaría? – uriah

@uriah: Funcionará, solo tiene que agregarlo manualmente. – BoltClock

Desde el specification:

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

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

Fuente

2011-12-16 14:42:13

creo que desea que este 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';}

Updated fiddle

que coincide con el primer hijo de un elemento con las clases "Proyecto" y "el trabajo "(o" proyecto "e" investigación "). No es necesario que use p:first-child si no es un elemento p; en su lugar, podría usar *:first-child.

Fuente

2011-12-16 14:42:39

Gracias! Solo me gustaría seleccionar el primero de su clase y aplicar el CSS no a cada elemento. Esto los selecciona a todos. – uriah

@uriah: Ah. No creo que puedas hacer eso sin cambiar tu marcado. No creo que incluso los selectores de CSS3 tengan una forma de seleccionar el primer elemento en un contenedor con un par de nombres de clase dados. Incluso ': first-of-type" se aplicaría al tipo de elemento, independientemente de la clase. –

first-child no funciona

Respuesta

Cuestiones relacionadas