Diferencia entre class y id???

[Snake nS]

Eso cual es la diferencia fundamental que los diferencia???

[Votredieu]

Lee estol:

http://www.sidar.org/recur/desdi/mcss/manual/sel.php

[ramm]

Pues id es para un elemento unico, de hecho si intentas ponerle el mismo id a varios elementos el validador te arrojara un error, diciendo que el ancla ya esta definida....

id se usa par aidentificar un elemento unico en el documento HTML, el cual puede servidr como ancla para un vinculo.
Class se usa para aplicar estilos iguales a varios elementos HTML, o sea, una clase es una serie de estilos definidos que se pueden usar muchas veces en cualquier etiqueta HTML.

Saludos.

[supernovato]

Pueden poner algun ejemplo de como es un MAL uso de un ID. Todavia no comprendo su diferencia con la CLASS. SEgun entiendo el ID solo puede ser utilizado por un elemento, pero al utilizarlo yo con varios, no me marca error. NO se si me explico. UN EJEMPLO POR FAVOR... QUE ME MARQUE UN ERRORSOTE!

[jesusbet]

Mira, yo no sé mucho de esto, pero puedes verlo por el lado de la semántica, empecemos por la traducción al castellano de cada uno:

id: 'identificador'. Se utiliza para diferenciar por medio de un número o letra o conjunto de letras (palabras) a un elemento, en muchas ramas de la informática (incluyendo el desarrollo web) los identificadores deben ser únicos (por eso lo del validador).

class: 'clase'. Se utiliza para agrupar a un grupo de elementos. Yo ponía el otro día una duda que ahora he comprendido mejor:
<div id="derecha" class="menu">
<ul>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>

<div id="izquierda" class="menu">
<ul>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>

De la manera anterior usamos una sola clase para cada menú y un id diferente para cada uno. ¿Para qué?. Pues es lo que te mencionaba, la semántica, ahí estás declarando que los dos divs son menús.

Ahora, ¿en que te puede ayudar lo anterior?, pues el class menu puedes darle estilos comunes y cuando les quieras cambiar algo o hacerles algo diferente, lo haces con cada identificador.

Saludos

[ramm]

el ejemplo de jesusbet esta muy bueno, en el css puedes hacer la clase .menu y ponerle los estilo, y ambos menus los tomaran, pero no puedes darle posicionamiento con la clase porque cada uno va en diferente posicion, entonces puedes posicionarlos desde CSS usando sus IDs
Error como tal no vas a ver, pero por ejemplo, si tienes una serie de elementos con el mismo ID el error que marca es que el ancla ya ha sido definida y que no se puede repetir, porque los IDs son anclas

[Durgeoble]

Id es identificador, una especie de dni para las etiquetas (salvando las distancias)
Las clases seria algo asi como grupos o modas (para entendernos).
Los ID identifican UN unico elemento (si pones ID repetidas esta mal) asi puedes aprovechar dicho identificador para dirigir a un visitante a ese punto de la pagina (<a href="#ID">texto</a>) para trabajar con javascrip (get.element.by.id) para aplicar estilos exclusivos del elemento (#ID {estilos} ) y mas.
Una clase puede pertenecer a uno o mas elementos.

Un mal uso de las clases es por ejemplo definir clases para un unico elemento ya que se puede usar el #ID para tal fin (por ejemplo con una unica cabecera class="cabecera")

Un mal uso de los #ID´s es definir los estilos de cada elemento individualmente en lugar de agrupar los estilos comunes y aplicarlos por clases

Código:

 
#menu1 { color: red; font-size: 1.5em; text-decoration: none; }
#historia  { color: red; font-size: 1.5em; text-decoration: none; }
#historia2  { color: red; font-size: 1.5em; text-decoration: none; }
#resumen  { color: red; font-size: 1em; text-decoration: none; }

Como puedes ver todos los estilos son identicos excepto el ultimo que cambia el tamaño de la fuente.

Código:

.textorojo  { color: red; font-size: 1.5em; text-decoration: none; }
#resumen { font-size: 1em; }

El efecto de este codigo es exactamente el mismo sin embargo es mucho mas liviano y comprensible, al compartir estilos los elementos comparten clase y se benefician (aparte de poder cambiarlo en grupo)
el elemento resumen al compartir la mayoria de los elementos tambien comparte clase pero para aplicarle un tamaño de letra distinto nos referimos exclusivamente a el por su #ID.

[Snake nS]

muy bueno, gracias a todos.

[supernovato]

Ok ya comprendo. Ahora... si me pongo a pensar con mucho sentido comun... DEMASIADO, EXAJERADO sentido comun, ¿No es mejor entonces hacerlo todo con clases?

.textorojo { color: red; font-size: 1.5em; text-decoration: none; }
.resumen { font-size: 1em; }

¿No es lo mismo?

Perdon por sacarlos de sus casillas... :)

[Snake nS]

viendolo de esa forma si, pero utilisar class para estilos iguales en diferentes elementos, e id para especificar individualmente otros, ayuda a tener las cosas mas organisadas y trabajar con menor codigo.

[jesusbet]

cierto, lo que dice Snake es la base de la semántica...

el punto no es usar un class para cada div que vayas a utilizar con diferente color, el punto es usar class para crear un documento semántico, por ejemplo, necesitas 3 bloques que serán usados para noticias, uno verde otro blanco y otro rojo, podrías hacer esto:

<div class="rojo"></div>
<div class="blanco"></div>
<div class="verde"></div>

o podrías hacer ésto:

<div class="noticia" id="rojo"></div>
<div class="noticia" id="blanco"></div>
<div class="noticia" id="verde"></div>

Hasta ahora parece que es mejor usar el primer ejemplo, pero, que tal si te piden que los enlaces tengan el mismo estilo en cada bloque??

en el primer caso harías:
.rojo a {
estilos para enlaces de bloque rojo
}

.blanco a {
estilos para enlaces de bloque blanco
}

.verde a {
estilos para enlaces de bloque verde
}

o incluso, de una manera más simple:
.verde a, .blanco a, .rojo a {
estilos para enlaces en bloque verde, bloque blanco y bloque rojo
}

Pero en el segundo caso harías:
.noticia a {
estilos para los enlaces de los bloques noticia
}

de la segunda forma tu documento sería más semántico (dicen los que saben), mientras que de la primera forma tu marcado vendría dando lo mismo que usar tablas... y tu hoja de estilos, que decir, un completo escrito en un lenguaje no terricola...

Desde mi humilde entender, así es... ;)

Saludos

[supernovato]

OK, Muchas gracias a todos, espero cambiar mi nickname pronto.

[jesusbet]

y para que cambiar el nick?? con ese puedes seguir posteando :s

[K3NNY]

Muy interesante lo de que los ID se pueden usar de anchors, no tenia idea de eso. Yo usaba el name, pero si tengo un ID en el lugar del anchors me ahorro un tag.

[enkee]

un ejemplo practico:

.perros{
tamaño: x;
color: y;
pelaje: z;
}

.perro #fido{
tamaño: a;
pelaje: b;
}

fido sigue siendo color y

Esto marca error

.perros #fido #laica{
tamaño: x;
color: y;
pelaje: z;
}

Nota: simplemente es ilógico, no funcionara. como le vaz asignar a laica los valores de fido, si ambos son unicos.

[C2am]

Hola enkee, creo que después de 8 años ya debe tener más que clara la diferencia.

Saludos