: first-child no funciona como se esperaba

Estoy tratando de 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á.: first-child no funciona como se esperaba

<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>

Yo tenía la impresión de que el CSS tengo seleccionará el primer h1 no importa dónde se encuentra en este div. ¿Cómo puedo hacer que funcione?

Fuente

2010-12-22 The Muffin Man

Independientemente de lo que CSS no pueda hacer, JavaScript puede hacerlo. – JCOC611

Esto es algo que puedes hacer con CSS3 :) :) – BoltClock

152

El selector h1:first-child significa

Seleccione el primer hijo de su padre
si y sólo si se trata de un elemento h1.

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

No es CSS3 de :first-of-type para su caso:

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

Pero con los problemas de compatibilidad del navegador y todo eso, es mejor dar el primer h1 una clase, entonces la orientación de esa clase:

.detail_container h1.first 
{ 
    color: blue; 
}

Fuente

2010-12-22 02:37:10 BoltClock

Entiendo ahora, aunque creo que deberían haber implementado ambas versiones cuando crearon el estándar. –

No funciona en la versión IE9. Dice h1: desconocido en la herramienta de desarrollador – Cine

[Lista de compatibilidad] (http://www.quirksmode.org/css/contents.html#t34) del selector ': first-of-type'. –

:first-child selecciona el primer h1si y sólo si es el primer hijo de su elemento padre. En su ejemplo, el ul es el primer hijo del div.

El nombre de la pseudo-clase es un poco engañoso, pero se explica bastante claramente here en la especificación.

jQuery's :first selector te ofrece lo que estás buscando. Usted puede hacer esto:

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

Fuente

2010-12-22 02:35:23

Entonces, ¿cómo hago esto como está? –

Su derecho es engañoso, principalmente me confundí porque he usado jQuery para hacer esto antes. –

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.

Fuente

2010-12-22 23:19:23 Grekz

buen trabajo! ¿Cómo es la aceptación del navegador en esta toma? –

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

Puede envolver sus etiquetas h1 en otro div y luego el primero sería el first-child. Eso div ni siquiera necesita estilos. Es solo una manera de segregar a esos niños.

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

Fuente

2012-05-09 16:47:41 GhostToast

también puede utilizar

.detail_container h1:nth-of-type(1)

Al cambiar el número 1 por cualquier otro número se puede seleccionar cualquier otro elemento h1.

Fuente

2014-03-14 08:37:05 user3419033

: first-child no funciona como se esperaba

Respuesta

Cuestiones relacionadas