2010-12-22 56 views
64

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?

+0

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

+9

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

Respuesta

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; 
} 
+1

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

+0

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

+7

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

8

: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");

+0

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

+0

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

8

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.

+0

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

+0

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

1

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

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.

Cuestiones relacionadas