Diferencias entre class y id

Cuando te líes con un caso práctico postéalo y te echamos un cablecito "en vivo" :)

Oye, muchísimas gracias a todos porque lo tengo ahora muchísimo más claro, de verdad. Me pondré a ello para asimilarlo con casos prácticos que una cosa es la teoría y otra la práctica.

Muchas muchas gracias.

Los libros de librosweb.es te van a venir muy bien.

Mi explicación es esta: En una clase de un colegio hay 30 niños (30 elementos html), cada uno de ellos con su DNi (su ID, ningún otro elemento puede tener el mismo) y su tono de cabello (varias class: .rubio, .moreno, .pelirrojo....)

Class se utiliza para elementos que comparten ciertas características: tipo de fuente, colores, tamaños...
Id se utiliza para elementos únicos en el documento que no se repiten, no va a haber ninguno igual. Por ejemplo, en un texto, hay un montón de párrafos, pero sólo uno de ellos va con el tamaño de fuente 30px y en Georgia, el resto va en Helvetica. Pues a ese p hay que darle un ID único, porque ningún otro elemento va a tener sus propiedades.

Creo que así es más fácil de entender. Al principio puede ser un poco jaleo esto de id y class, sobre todo porque tenderás a utilizar muchos class o muchos ids, y no actuar como se debe. Pero todo es practicar y practicar.

Aunque todo lo que te han dicho arriba es cierto y son ejemplos muy buenos hay algo que no se ha comentado. Un elemento solo puede (debe) tener un atributo id, mientras que puede tener más de un atributo class, por ejemplo

<div id="side-nav" class="green float-right">Tu contenido</div>

heredaría el estilo para .green y para .float-right. Esto esta muy bien para hacer tu css más modular. En librosweb.es existen tres manuales de CSS que quizás te hagan tener una mejor visión. La exposición de conocimientos de manera estructurada (libros) son la mejor forma de aprender, :-)

Saludos!

No es complicado. Plantéate: ¿puede haber más de uno como este? Si la respuesta es si, usa una clase. Totalmente correcto.

Por poner otro ejemplo a ver si te ayuda, tenemos un coche. Es class coche, por que coches hay muchisimos. Pero su matricula es su id, por que es unica y no pueden haber dos iguales.

Ejemplos mas orientados a web... pues, si vas a crear un estilo de párrafo debe ser un class, por que con casi total seguridad vas a tener más de un párrafo en cada linea.

La id es para algo único y que no se vaya a repetir en toda esa pagina. Por ejemplo, #cabecera, o #pie, suelen ser elementos que no tienes más de uno por página.

Pero bueno, como ya te han dicho arriba, siempre que pueda haber más de un elemento en la misma página con el mismo "estilo" aplicado, has de usar class

No es complicado. Plantéate: ¿puede haber más de uno como este? Si la respuesta es si, usa una clase.

De todas formas, no son excluyentes, no es lo uno o lo otro... puedes usar un div #cabecera y tener definida una clase que pone los fondos de color, por ejemplo. Pero vamos, la idea es usar id para identificar elementos únicos.

Mírate el código fuente de wordpress, por ejemplo. Verás que usan ambas cosas y seguramente lo entenderás mejor. No se me ocurre otro ejemplo ahora mismo...

Se que es mucho pedir pero ¿sabes donde podría encontrar un ejemplo claro?. Mil gracias por tu respuesta Vaclad.

La principal diferencia entre un id y un class es que el id debe ser único en el documento mientras que el class se puede repetir. Los id se suelen aplicar a elementos puntuales que suelen ser importantes, por ejemplo un div que agrupe el contenido, una cabecera...

Los id siempre comienzan por "#" mientras que class comienza por "."