Seleccionar :firs-child

albertoshu · #1 (**permalink**) 08/09/2013, 15:44

Hola a todos,

Con el siguiente código prentendo poner el fondo del primer div del fileset "miClase" de color #ccc, ...pero no consigo hacer que funcione y no sé que estoy haciendo mal.

Código HTML:

<style>
    fieldset.miclase div:first-child{
        background-color: #ccc;

    }
</style>

<fieldset class="miclase">
    <div> Este es el div que quiero seleccionar</div>
    <div> Este es otro div</div>

</fieldset>

Alguna idea?

Gracias a todos!!

pzin · #2 (**permalink**) 08/09/2013, 17:49

Pues así tal cual debería de funcionar. Pon el código suficiente para reproducir el error.

albertoshu · #3 (**permalink**) 09/09/2013, 02:21

hola Pzin,

Este código tal cual sería suficiente para reproducir el error, no?

Bueno por si acaso, añado un poco de codigo, para que se vea hay una parte que sí funcina.

Código HTML:

   <head></head>

   <body>
     <style>
        
     <!-- Si selecciono los div, sí funciona --> 
     fieldset.miclase div{
          color: red;
        }

       
       
      <!-- Si uso first-child para seleccionar solo el primer div, NO FUNCIONA --> 
     fieldset.miclase div:first-child {
          background-color: #ccc;
       }

      </style>

   


      <fieldset class="miclase">
         <div> Este es el div que quiero seleccionar</div>
         <div> Este es otro div</div>

     </fieldset> 

    </body>

Puedes copiar y pegar el código AQUÍ, para probarlo.

Ves algo?

Gracias!!

pzin · #4 (**permalink**) 09/09/2013, 02:29

W3Schools es una mala fuente de información.

Como digo tendría funcionar bien, siempre y cuando pongas el HTML bien, porque style va dentro de head.

Un ejemplo funcional con tu código:

codeams · #5 (**permalink**) 09/09/2013, 14:01

Si el div tiene un color de fondo heredado quizá necesites ponerle "!important". No puedo decirlo con seguridad porque no tengo el código completo.
Espero te sea de ayuda. saludos.

pzin · #6 (**permalink**) 09/09/2013, 14:18

Cabe destacar que div:first-child selecciona el primer hijo que sea un div, no el primero div. Es decir, si tienes algo así:

Código HTML:

Ver original<section>
  <p></p>
  <div></div>
</section>

No va a funcionar, ya que div no es :first-child(). En este caso podrías usar por ejemplo :first-of-type(), que entonces si que te seleccionaría el primer div que aparezca independientemente del número de hijo que sea.

No sé si el problema andará por ahí, pero suele pasar alguna vez.