una - Qué selector de CSS se puede usar para seleccionar el primer div dentro de otro div

selector padre css

Question

Tengo algo como:

<div id="content>

   <h1>Welcome to Motor City Deli!</h1>
   <div style=" font-size: 1.2em; font-weight: bolder;">Sep 19, 2010</div>
   <div > ... </div>

¿Cuál es el selector css para el segundo div (1er div dentro del div "content") de modo que pueda establecer el color de fuente de la fecha dentro de ese div?

Answer 1

La respuesta MÁS CORRECTA a tu pregunta es ...

#content > div:first-of-type { /* css */ }

Esto aplicará el CSS al primer div que es hijo directo de #content (que puede ser o no el primer elemento hijo de #content)

Otra opción:

#content > div:nth-of-type(1) { /* css */ }

Answer 2

Lo más parecido a lo que estás buscando es la : pseudoclass del primer hijo ; desafortunadamente esto no funcionará en tu caso porque tienes un <h1> antes de los <div>s . Lo que yo sugeriría es que agregue una clase al <div> , como <div class="first"> y luego que lo estilo de esa manera, o use jQuery si realmente no puede agregar una clase:

$(''#content > div:first'')

Answer 3

Si podemos suponer que el H1 siempre estará allí, entonces

div h1+div {...}

pero no tengas miedo de especificar la identificación del contenido div:

#content h1+div {...}

Eso es casi tan bueno como puede obtener el navegador cruzado en este momento sin recurrir a una biblioteca de JavaScript como jQuery. El uso de h1 + div garantiza que solo el primer div después del H1 obtenga el estilo. Existen alternativas, pero dependen de los selectores de CSS3, y por lo tanto no funcionarán en la mayoría de las instalaciones de IE.

Answer 4

Usted quiere

#content div:first-child {
/*css*/
}