¿Cuál sería la diferencia entre el atributo class
y el atributo id
?
¿Tienen algún uso especifico cada uno de los mismos?
Stack Overflow en español es un sitio de preguntas y respuestas para programadores y profesionales de la informática. Solo te toma un minuto registrarte.
Regístrate para unirte a esta comunidadel atributo class te ayuda a enlazar un estilo de CSS (lo que define el aspecto de ese elemento, y todos los demás elementos donde apliques ese CSS). Por ejemplo:
.rojo { background-color: red; }
<div class="rojo">Hola</div>
<div class="rojo">Qué tal</div>
Y el atributo id te permite identificar ese elemento de forma única en todo el documento para usarlo después, ya bien sea con CSS o con javascript.
.rojo { background-color: red; }
<div class="rojo">Hola</div>
<div id="rojo" class="rojo">Qué tal</div>
document.getElementById('rojo').innerHTML = 'Qué tal, bien gracias.'
Los "id" no deben repetirse en mismo documento o ocurrirán comportamientos inesperados.
Resumiendo, con un id actúas directamente en el elemento que quieres y con class puedes actuar masivamente en todos los elementos que usen esa clase.
De manera literal o con una analogía te lo explico:
class="Son tus caracteríticas como persona, medio económicos, etc"
id="Es tu identidad, de esa manera te pueden identificar a traves de tu Cedula/NIT donde quieras que lo soliciten"
Muchas personas pueden pertenecer a la misma clase y tener condiciones parecidas, pero nadie puede tener el mismo id=""
y en caso de dos personas tener el mismo id=""
las dos tendrian problemas con la ley si una de ellas está en el momento y lugar equivocado.
Así mismo funciona en html, supongamos que quiero una misma class=""
para todos mis formularios, entonces en CSS yo defino que la class="mis formularios"
tengan todos las letras azules, ahora bien, necesito que el formulario 1 esté en un sitio y el 2 en otro sitio, es ahí donde viene el id=""
debo identificar cada elemento de cada formulario con nombres distintos porque a pesar de que tienen la misma class=""
son dos elementos independientes y no quiero que lo que haga con uno afecte al otro como por ejemplo a la hora de guardar los datos en una base de datos.
class
=> clase del elementoid
=> identificador del elemento, el identificador es único y la clase puede ser común, es la mayor diferenciaid
sirve para aplicar estilos, y tendría prioridad sobre la clase. Es importante saberlo para no aplicar estilos de forma que se rompa la cascada, quedando un código mal optimizado.