Foros del Web » Creando para Internet » CSS »

Duda entre "p#pepito.azul" y "azul #pepito p"

Estas en el tema de Duda entre "p#pepito.azul" y "azul #pepito p" en el foro de CSS en Foros del Web. Buenas! En algunos ejemplos que veo por ahí, primero ponen el selector de elemento (por ejemplo p) despues el de ID y despues el del ...
  #1 (permalink)  
Antiguo 17/12/2008, 07:06
 
Fecha de Ingreso: julio-2008
Mensajes: 544
Antigüedad: 9 años, 4 meses
Puntos: 56
Pregunta Duda entre "p#pepito.azul" y "azul #pepito p"

Buenas!

En algunos ejemplos que veo por ahí, primero ponen el selector de elemento (por ejemplo p) despues el de ID y despues el del CLASS, pero otras veces lo veo al reves, y no entiendo muy bien la direfencia de hacerlo de una forma u otra.
ALguine sabria explicarme cual es la forma correcta y por qué?

Gracias
__________________
Un saludo! :-)
Quiero ser el primero
  #2 (permalink)  
Antiguo 17/12/2008, 07:48
 
Fecha de Ingreso: junio-2004
Mensajes: 266
Antigüedad: 13 años, 5 meses
Puntos: 8
Respuesta: Duda entre "p#pepito.azul" y "azul #pepito p"

p#pepito = tag <p> con id = "pepito"

#pepito p = todos los <p> dentro del elemento de id="pepito"

Lo del .azul me deja un poco a cuadros, porque no vas a tener otro p#pepito en el html al que aplicar una clase distinta a la azul.

Igual con un ejemplo real...
__________________
WebSenior
  #3 (permalink)  
Antiguo 17/12/2008, 08:29
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
Respuesta: Duda entre "p#pepito.azul" y "azul #pepito p"

Hola:

Como los id's deben ser únicos, no tiene ningún sendido una definición del tipo p#algo o p #algo, ya que id="algo" solo puede existir una vez...

Y #algo y por detrás cualquier tipo de selector sí que es válido claro que dependerá de que sean correctos, aunque puedan colar cosas como elementos de bloque dentro de elementos en línea, pero ese tipo de aberraciones, solo se ven en webs mal hechas.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #4 (permalink)  
Antiguo 17/12/2008, 08:54
 
Fecha de Ingreso: julio-2008
Mensajes: 544
Antigüedad: 9 años, 4 meses
Puntos: 56
Respuesta: Duda entre "p#pepito.azul" y "azul #pepito p"

aja... vale, es que veia, por ejemplo, en un libro que tengo por aqui (css pocket reference) el siguiente ejemplo:

h1#page-title{ lo que sea; }
body#home { lo que sea;}

con mi nivel (pobre) de ingles deduzco que funciona igual que me estais contando....
__________________
Un saludo! :-)
Quiero ser el primero
  #5 (permalink)  
Antiguo 17/12/2008, 10:38
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
Respuesta: Duda entre "p#pepito.azul" y "azul #pepito p"

Cita:
Iniciado por darchy Ver Mensaje
aja... vale, es que veia, por ejemplo, en un libro que tengo por aqui (css pocket reference) el siguiente ejemplo:

h1#page-title{ lo que sea; }
body#home { lo que sea;}

con mi nivel (pobre) de ingles deduzco que funciona igual que me estais contando....
Por mucho tiempo los "malos" webmasters solo usaban explorer (yo también estuve en ese saco, pero no mucho tiempo), para crear/probar las páginas, y ese navegador permitía algunas cosas como esas, así que no veo extraño lo que comentas, pero los id's no deben repetirse, así que todo lo que haya antes de una declaración del tipo #id es sencillamente absurdo.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #6 (permalink)  
Antiguo 17/12/2008, 10:41
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Respuesta: Duda entre "p#pepito.azul" y "azul #pepito p"

Como bien dice caricatos todo lo que este antes del # es al dope

Esto:
Cita:
h1#page-title{ lo que sea; }
Se traduciría así:
Cita:
#page-title h1{ lo que sea; }
Lo que significa (siempre leyendo de atras para adelante) que estamos dandole propiedades al H1 que esta dentro del id page-title ¿se entiende?

  #7 (permalink)  
Antiguo 17/12/2008, 10:50
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 9 meses
Puntos: 997
Respuesta: Duda entre "p#pepito.azul" y "azul #pepito p"

Cita:
Iniciado por DragonX Ver Mensaje
Esto:
Cita:
h1#page-title{ lo que sea; }
Se traduciría así:
Cita:
#page-title h1{ lo que sea; }
no dragon... esos 2 códigos que pusistes no son equivalentes. El primero indica un h1 con id="page-title"y el otro un h1 que es hijo de un elemento con id="page-title"

lo que dice Caricatos, que es algo cierto, es que como los ids son únicos, es absurdo poner delante el h1...si le distes id="page-title" al H1 no puede haber por ejemplo un h4 con id="page-title" porque ese mismo id

en cambio, con las clases si tienen sentido, porque:
.clase -> afecta a todos los elementos con esa clase
p.clase -> afecta a todos los p con esa clase
div.clase -> afecta a todos los div con esa clase
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #8 (permalink)  
Antiguo 17/12/2008, 11:00
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Respuesta: Duda entre "p#pepito.azul" y "azul #pepito p"

Cita:
Iniciado por webosiris Ver Mensaje
no dragon... esos 2 códigos que pusistes no son equivalentes. El primero indica un h1 con id="page-title"y el otro un h1 que es hijo de un elemento con id="page-title"
Muy cierto.....muchas veces me armo cada despelote con estas cosas!!!
Gracias!
  #9 (permalink)  
Antiguo 17/12/2008, 11:41
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Duda entre "p#pepito.azul" y "azul #pepito p"

Aun así no estoy del todo de acuerdo con que sea absurdo. Que no aporta nada efectivo al código, eso desde luego, pero también puede ayudar a mantener el orden y la limpieza para futuras ediciones o el manejo por otras personas. Sirve como simple referencia de organización.

En ese sentido, también sería absurdo algo que usamos mucho:

#menu ul {...}
#menu ul li {...}
#menu ul li a {...}
#menu ul li a span {...}

que sería lo mismo que:

#menu ul {...}
#menu li {...}
#menu a {...}
#menu span {...}

(podría no ser lo mismo, pero a efectos de los selectores de arriba, los de abajo funcionarían exactamente igual, y en raras ocasiones usaremos las diferenciaciones en las que estáis pensando).

pero lo mantenemos como arriba por las razones de claridad y limpieza visual que he expuesto.

Y encima, no hay que olvidar que en algunas ocasiones, si no está toda la jerarquía IE6 da errores, así que prefiero poner

h1#pepito {} que #pepito {} (en ese caso, no siempre).
__________________
Visita mi nueva web idplus.org
  #10 (permalink)  
Antiguo 17/12/2008, 12:38
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
Respuesta: Duda entre "p#pepito.azul" y "azul #pepito p"

Hola:

No sé, no sé... Mikel, no recuerdo haber tenido serios problemas en ie6 cuando lo usaba, y para pruebas conseguí una versión (MultipleIEs) y no he visto ningún error en una prueba que hice (serán casos puntuales tal vez )

En concreto lo probé con estas líneas:

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>
	http://www.caricatos.net/probador
</title>
<style type="text/css">
div#capa1 {
 border: 3px solid blue;
}

#capa2 {
 border: 3px solid red;
}

</style>
</head>
<body>
<div id="capa1" >capa1</div>
<div id="capa2" >capa2</div>
</body>
</html>
Bueno, también metí algunas cosillas más...

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #11 (permalink)  
Antiguo 17/12/2008, 12:49
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Duda entre "p#pepito.azul" y "azul #pepito p"

Yo recuerdo algún problema puntual concretamente con "ul li a" y cosas así.

Si recuerdo alguno y soy capaz de reproducirlo lo pongo.
__________________
Visita mi nueva web idplus.org
  #12 (permalink)  
Antiguo 17/12/2008, 12:53
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Duda entre "p#pepito.azul" y "azul #pepito p"

De todas maneras me refiero a, ¿qué resultaría más fácil de entender a simple vista para qué sirven estos selectores? ¿esta manera?:

#home { lo que sea;}
#contacto { lo que sea;}
#catalogo { lo que sea;}
#faq { lo que sea;}

¿o esta otra?.

body#home { lo que sea;}
body#contacto { lo que sea;}
body#catalogo { lo que sea;}
body#faq { lo que sea;}
__________________
Visita mi nueva web idplus.org
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




La zona horaria es GMT -6. Ahora son las 13:24.