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