Foros del Web » Creando para Internet » CSS »

p:first-child precedido de otro tag no funciona

Estas en el tema de p:first-child precedido de otro tag no funciona en el foro de CSS en Foros del Web. Hoy me di cuenta de esto y me estuve comiendo la cabeza un buen rato. ¿Por qué si hago esto no funciona? Es muy curioso... ...
  #1 (permalink)  
Antiguo 11/06/2012, 14:11
Avatar de alivan  
Fecha de Ingreso: agosto-2010
Mensajes: 16
Antigüedad: 13 años, 7 meses
Puntos: 3
p:first-child precedido de otro tag no funciona

Hoy me di cuenta de esto y me estuve comiendo la cabeza un buen rato. ¿Por qué si hago esto no funciona? Es muy curioso... ¿Hay alguna razón?

Código HTML:
Ver original
  1. <style type="text/css">
  2. section p:first-child{
  3.     color: green;
  4. }
  5.  
  6.     <div>
  7.         <ul>
  8.             <li>lista con</li>
  9.             <li>varios elementos</li>
  10.         </ul>
  11.         <p>Párrafo coloreado</p>
  12.         <p>Otro párrafo</p>
  13.     </div>

¿No se permite usar el selector :first-child cuando en la misma capa les preceden otros elementos distintos?

En este caso la solución es simple, se puede usar ul+p, pero aun así me intriga.
  #2 (permalink)  
Antiguo 12/06/2012, 17:26
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: p:first-child precedido de otro tag no funciona

Hola alivan.

Estuve toqueteando porque me dio curiosidad también. Mis conclusiones:

Lo más curioso es que así si funciona:
Código CSS:
Ver original
  1. section div:first-child{...}
  2. section ul:first-child{...}
  3. section li:first-child{...}

También funciona cuando quitas completamente <ul> y <li>.

Luego leyendo la biblia:

Cita:
Iniciado por w3c
The :first-child selector is used to select the specified selector, only if it is the first child of its parent.
Es decir, en este caso P no es el primer hijo de DIV, es el segundo (el primero es UL). Lo que explica que funcione de la manera arriba mencionada.
Por lo que creo que en tu última pregunta está la respuesta.

No me gusta decir estas cosas sin estar seguro, pero yo lo interpreto así. Si viene algún maestro por aquí para confirmarlo me quedo más tranquilo.
  #3 (permalink)  
Antiguo 13/06/2012, 05:29
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 9 meses
Puntos: 539
Respuesta: p:first-child precedido de otro tag no funciona

Efectívamente, Bonez, el pseudoselector no se lee como "el primer p hijo de..." sino "el primer elemento que siendo p sea el primer hijo de"
Hay una doble condición.

En este caso yo utilizaría el selector:
Código CSS:
Ver original
  1. section p:nth-of-type(-n+1){
  2.     color: green;
  3. }
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #4 (permalink)  
Antiguo 13/06/2012, 08:47
Avatar de alivan  
Fecha de Ingreso: agosto-2010
Mensajes: 16
Antigüedad: 13 años, 7 meses
Puntos: 3
Respuesta: p:first-child precedido de otro tag no funciona

Claro, yo lo había entendido como "el primer p hijo de...", y me chocó un poco. Quizás error por mi parte por no leer bien la documentación.

Muchas gracias por las respuestas.

Etiquetas: tag
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 14:37.