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

[darchy]

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

[kurroman]

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

[caricatos]

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

[darchy]

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

[caricatos]

Iniciado por darchy

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

[DragonX]

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

Esto:

h1#page-title{ lo que sea; }

Se traduciría así:

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

[webosiris]

Iniciado por DragonX

Esto:

h1#page-title{ lo que sea; }

Se traduciría así:

#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

[DragonX]

Iniciado por webosiris

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!

[Mikmoro]

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

[caricatos]

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

[Mikmoro]

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

Si recuerdo alguno y soy capaz de reproducirlo lo pongo.

[Mikmoro]

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