: primer hijo no funciona como se esperaba

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 elemento h1 .

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