: el primer hijo no funciona como se esperaba

96

Estoy tratando de seleccionar el primero h1dentro de divcon una clase llamada detail_container. Funciona si h1es el primer elemento dentro de esto div, pero si viene después de esto ul, no funcionará.

<style type="text/css">
.detail_container h1:first-child
{
color:blue;
} 
</style>
</head>
<body>
<div class="detail_container">
    <ul>
    <li></li>
    <li></li>
    </ul>
    <h1>First H1</h1>
    <h1>Second H1</h1>
</div>
</body>
</html>

Tenía la impresión de que el CSS que tengo seleccionará el primero h1sin importar dónde esté en esto div. ¿Cómo puedo hacer que funcione?

css css-selectors El hombre muffin
fuente
1
Cualquier cosa que CSS no pueda hacer, JavaScript sí.
JCOC611
11
Sin embargo, esto es algo que puede hacer con CSS3 :)
BoltClock

Respuestas:

216

El h1:first-childselector significa

Seleccione el primer hijo de su padre
si y solo si es un h1elemento.

El :first-childdel contenedor aquí es el ul, y como tal no puede satisfacer h1:first-child.

Hay CSS3 :first-of-typepara su caso:

.detail_container h1:first-of-type
{
    color: blue;
}

Pero con los problemas de compatibilidad del navegador y todo eso, es mejor que le dé h1una clase al primero y luego apunte a esa clase:

.detail_container h1.first
{
    color: blue;
}
BoltClock
fuente
2
Ahora lo entiendo, aunque creo que deberían haber implementado ambas versiones cuando crearon el estándar.
The Muffin Man
No funciona en la versión IE9. Dice h1: desconocido en la herramienta del desarrollador
Cine
11
Lista de compatibilidad de :first-of-typeselector.
Jess Telford
4
Lista de compatibilidad más reciente de :first-of-type. El enlace anterior es incorrecto.
BadHorsie
En mi opinión, el término :first-childno es claro de entender, porque define el elemento como selector de CSS, por ejemplo h1, y luego piensa "tomar el primer hijo" de todos en el nivel DOM elegido. Lo usé mal tantas veces ... Tenemos que acostumbrarnos al :first-of-typeselector y pensar en el primer hijo de su tipo.
Kai Noack
13

:first-childselecciona el primero h1 si y solo si es el primer hijo de su elemento padre. En su ejemplo, ules el primer hijo de div.

El nombre de la pseudoclase es algo engañoso, pero se explica con bastante claridad aquí en la especificación.

El :firstselector de jQuery te da lo que estás buscando. Puedes hacerlo:

$('.detail_container h1:first').css("color", "blue");

Rob Sobers
fuente
Tiene razón, es engañoso, principalmente me confundí porque he usado jQuery para hacer esto antes.
The Muffin Man
9

Para ese caso particular puedes usar:

.detail_container > ul + h1{ 
    color: blue; 
}

Pero si necesita ese mismo selector en muchos casos, debería tener una clase para esos, como dijo BoltClock.

Grekz
fuente
No debería tener ningún problema. Aquí la referencia w3.org/TR/CSS2/selector.html#child-selectors
Grekz
6

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.

Fabrice
fuente
1

Puede envolver sus h1etiquetas en otro divy luego el primero sería el first-child. Eso divni siquiera necesita estilos. Es solo una forma de segregar a esos niños.

<div class="h1-holder">
    <h1>Title 1</h1>
    <h1>Title 2</h1>
</div>
GhostToast
fuente
0

El elemento no puede heredar directamente de la <body>etiqueta. Puedes intentar ponerlo en una <dir style="padding-left:0px;"></dir>etiqueta.

Edmond Chow
fuente