¿Qué selector de CSS se puede usar para seleccionar el primer div dentro de otro div?

95

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 "contenido") de modo que pueda establecer el color de fuente de la fecha dentro de ese div?

css css-selectors GregH
fuente
1
Acepte la respuesta más votada, definitivamente es correcta.
Barry Michael Doyle

Respuestas:

224

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

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

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

Otra opción:

#content > div:nth-of-type(1) { /* css */ }
Jeremy Moritz
fuente
6
Acepte que es la ÚNICA respuesta correcta a la pregunta y que debe aceptarse.
Ilya Streltsyn
¿Puede decirme cómo seleccionar todos los div exceptprimero / último div?
Tân
4
@HappyCoding #content > div:not(:last-of-type) { /* css */ }
Jeremy Moritz
@ Tân, si quieres todos los divs excepto el primero Y el último, sería ... #content > div:not(:first-of-type):not(:last-of-type) { /* css */ }
Jeremy Moritz
20

Usted quiere

#content div:first-child {
/*css*/
}
Capitán Otis
fuente
3
No funcionará porque <div>no es el primer hijo (es <h1>).
Josh Leitzel
Sin mencionar que no funcionará en absoluto en IE, incluso si la fecha divfuera el primer hijo.
Valentin Flachsel
1
De Verdad? W3 dice que lo hará siempre que se especifique un tipo de documento. (Honestamente, no lo sé.)
Josh Leitzel
3
Acabo de ejecutar una prueba, de hecho funciona si se especifica doctype. En mi defensa, no me sorprendería que las cosas comenzaran a funcionar en IE si escribieras <the_cake_is_a_lie> en la parte superior del archivo ...
Valentin Flachsel
1
Siempre pruebo antes de publicar una respuesta. Y el pastel es mentira.
Capitán Otis
16

Si podemos asumir que el H1 siempre estará ahí, entonces

div h1+div {...}

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

#content h1+div {...}

Eso es lo mejor que puede obtener en varios navegadores en este momento sin recurrir a una biblioteca de JavaScript como jQuery. El uso de h1 + div asegura que solo el primer div después de H1 obtenga el estilo. Existen alternativas, pero se basan en selectores CSS3 y, por lo tanto, no funcionarán en la mayoría de las instalaciones de IE.

Stan Rogers
fuente
+1. Ni siquiera pensé en eso. Tenga en cuenta que esta solución no funcionará en IE6.
Josh Leitzel
6

Lo más parecido a lo que está buscando es la pseudoclase del primer hijo ; desafortunadamente, esto no funcionará en su caso porque tiene una <h1>antes de <div>s. Lo que sugeriría es que agregue una clase a <div>, me gusta <div class="first">y luego le dé un estilo de esa manera, o use jQuery si realmente no puede agregar una clase:

$('#content > div:first')

Josh Leitzel
fuente
1
error ortográfico - debería ser$('#content > div.first)
Mateusz Odelga