Diferencia entre class y id en CSS

roker77 · 20 Jul 2013

Hola buenos dias, estaba aprendiendo CSS, soy nuevo en esto y me he fijado de 1 cosilla, no logro diferenciar concretamente el uso de "class" del uso de "id", me parece que se utilizan para lo mismo, solo que con distinto nombre, alguien puede por favor darme algun concepto o explicacion y quizas ejemplos.

Ejemplo:

<div class="primero"></div>

no lo diferencio de...

<div id="primero"></div>

Entiendo que class puedo usarlo muchas veces:

<p class="ejemplo">Ejemplo</p>
<p class="ejemplo">Ejemplo</p>
<p class="ejemplo">Ejemplo</p>

y que id, solo una vez... pero no es lo mismo si igual uso id muchas veces? css le dara el mismo valor a todos los .ejemplo que encuentre asi como a todos los #ejemplo no?

<p id="ejemplo">Ejemplo</p>
<p id="ejemplo">Ejemplo</p>
<p id="ejemplo">Ejemplo</p>

Muchas gracias de ante mano!

Googleriano · 20 Jul 2013

Creo que class es para nombres y demas vainas, e ID para números.

Pulsar · 20 Jul 2013

Creo qeu es porque ID es unico. O sea solo un elemento coincidira con el ID, para la clase, pueden coincidir infinitos.

Digamos "class" se utiliza para decir que el elemento esta dentro del tipo "X".

Y ID se utiliza para decir que el elemento ES X.

Creo que ID solo puede ser usado una vez en la pagina.

roker77 · 20 Jul 2013

Pulsar dijo:
Creo qeu es porque ID es unico. O sea solo un elemento coincidira con el ID, para la clase, pueden coincidir infinitos.

Digamos "class" se utiliza para decir que el elemento esta dentro del tipo "X".

Y ID se utiliza para decir que el elemento ES X.

Creo que ID solo puede ser usado una vez en la pagina.

de igual forma puedo colocar distintos id con diferentes nombres?

id="primero"
id="segundo"?

o solo es posible un id en todo el archivo?

Pulsar · 20 Jul 2013

varios id es posible

HammerGarita · 20 Jul 2013

Hola compañero, te explicare un poco.
Un ID es un identificador y debe ser único en todo el documento.
Si quieres aplicar estilos CSS a un ID tienes que añadir el simbolo #.
Ejemplo:

#primero{
}

Ahora la propiedad class es una clase y es utilizado para aplicar estilos CSS a muchos elementos a la vez.
Si quieres aplicar estilos CSS a un class tienes que usar un punto (.)
Ejemplo:

.color{
}

Espero te haya ayudado :encouragement:

roker77 · 20 Jul 2013

muchas gracias [MENTION=21500]HammerGarita[/MENTION], [MENTION=3864]manuelspirit[/MENTION] y [MENTION=11500]Pulsar[/MENTION] me han resuelto cierta duda!

raulgonzalez · 20 Jul 2013

Te amplio un poco la información que te han dado los compañeros.
Está claro que un id es un identificador único y solo sirve para un objeto, en éste caso un div.
Pero con una clase puedes crear muchos divs con las mismas características. La ventaja de hacer ésto es ahorrar código y consecuentemente, proceso de datos y ancho de banda.
Si tienes un div con las mismas características y se va a repetir mucho, sería una tontería crear un id1, id2, id3. Creas una clase que puedes llamar por ejemplo "div_banner" y lo pones todas las veces que necesites.

Saludos.

roker77 · 20 Jul 2013

raulgonzalez dijo:
Te amplio un poco la información que te han dado los compañeros.
Está claro que un id es un identificador único y solo sirve para un objeto, en éste caso un div.
Pero con una clase puedes crear muchos divs con las mismas características. La ventaja de hacer ésto es ahorrar código y consecuentemente, proceso de datos y ancho de banda.
Si tienes un div con las mismas características y se va a repetir mucho, sería una tontería crear un id1, id2, id3. Creas una clase que puedes llamar por ejemplo "div_banner" y lo pones todas las veces que necesites.

Saludos.

pero no es mas facil llamar directamente a div en css?

div{

}

mmm... aunque pensandolo podria haber el caso de que fuesen 6 div, quiero darle cierta caracterstica a 3 de ellos asi que colocare una class en especifico y a los otros 3 otra class en especifico correcto?

Cicklow · 20 Jul 2013

roker77 dijo:
pero no es mas facil llamar directamente a div en css?

div{

}

eso afecta a todos los divs...

villabull · 20 Jul 2013

HammerGarita dijo:
Hola compañero, te explicare un poco.
Un ID es un identificador y debe ser único en todo el documento.
Si quieres aplicar estilos CSS a un ID tienes que añadir el simbolo #.
Ejemplo:

#primero{
}

Ahora la propiedad class es una clase y es utilizado para aplicar estilos CSS a muchos elementos a la vez.
Si quieres aplicar estilos CSS a un class tienes que usar un punto (.)
Ejemplo:

.color{
}

Espero te haya ayudado :encouragement:

ya, aprendí algo nuevo. :encouragement:

Steeep · 21 Jul 2013

roker77 dijo:
mmm... aunque pensandolo podria haber el caso de que fuesen 6 div, quiero darle cierta caracterstica a 3 de ellos asi que colocare una class en especifico y a los otros 3 otra class en especifico correcto?[/SIZE]

En el caso que fuera 6 div's & solo vas a cambiar 3 de ellos lo puedes hacer así, suponiendo que son los 3 primeros div's.

PHP:

div {
   ESTILO GENERAL A LOS DIVs.
}

div:nth-child(1), div:nth-child(2), div:nth-child(3), {
   ESTILOS DIFERENTES A LOS 3 PRIMEROS DIVs.
}

Espero te sirva :encouragement:

Diferencia entre class y id en CSS

roker77

Googleriano

Pulsar

roker77

Pulsar

HammerGarita

roker77

raulgonzalez

roker77

Cicklow

villabull

Steeep

Temas similares