detail_container
seleccionar el primer h1
dentro de un div
con una clase llamada detail_container
. Funciona si h1
es el primer elemento dentro de este div
, pero si viene después de este ul
, no funcionará.
.detail_container h1:first-child { color:blue; }
First H1
Second H1
Tenía la impresión de que el CSS que tengo seleccionará el primer h1
sin importar dónde se encuentre en este div
. ¿Cómo puedo hacer que funcione?
El selector h1:first-child
significa
Seleccione el primer hijo de su padre
si y solo si es un elementoh1
.
El :first-child
del contenedor aquí es el ul
, y como tal no puede satisfacer h1:first-child
.
Hay CSS3 :first-of-type
para su caso:
.detail_container h1:first-of-type { color: blue; }
Pero con problemas de compatibilidad con navegadores y otras cosas, es mejor darle a la primera h1
una clase, y luego apuntar a esa clase:
.detail_container h1.first { color: blue; }
:first-child
selecciona la primera h1
si y solo si es el primer elemento secundario de su elemento primario. En tu ejemplo, el ul
es el primer hijo del div
.
El nombre de la pseudoclase es algo engañoso, pero se explica muy claramente aquí en la especificación.
jQuery’s :first
selector te brinda lo que estás buscando. Puedes hacerlo:
$('.detail_container h1:first').css("color", "blue");
Para ese caso en particular, puede usar:
.detail_container > ul + h1{ color: blue; }
Pero si necesita ese mismo selector en muchos casos, debería tener una clase para ellos, como dijo BoltClock.
también puedes usar
.detail_container h1:nth-of-type(1)
Al cambiar el número 1 por cualquier otro número, puede seleccionar cualquier otro elemento h1.
Podría envolver sus tags h1
en otro div
y luego el primero sería el first-child
. Ese div
ni siquiera necesita estilos. Es solo una manera de segregar a esos niños.
Title 1
Title 2