¿Cuál es la diferencia entre id y clase en CSS y cuándo debo usarlos? [duplicar]
#main {
background: #000;
border: 1px solid #AAAAAA;
padding: 10px;
color: #fff;
width: 100px;
}
<div id="main">
Welcome
</div>
Aquí le di un idal divelemento y le estoy aplicando el CSS relevante.
O
.main {
background: #000;
border: 1px solid #AAAAAA;
padding: 10px;
color: #fff;
width: 100px;
}
<div class="main">
Welcome
</div>
Ahora aquí le di un classy divtambién está haciendo el mismo trabajo para mí.
Entonces, ¿cuál es la diferencia exacta entre Id y clase y cuándo debo usar idy cuándo debo usar class? Soy un novato en CSS y diseño web y estoy un poco confundido al lidiar con esto.
Utilice una clase cuando desee diseñar de forma coherente varios elementos en toda la página/sitio. Las clases son útiles cuando tienes, o posiblemente tendrás en el futuro, más de un elemento que comparte el mismo estilo. Un ejemplo puede ser un div de "comentarios" o un determinado estilo de lista para usar en enlaces relacionados.
Además, un elemento determinado puede tener más de una clase asociada, mientras que un elemento solo puede tener una identificación. Por ejemplo, puedes darle a un div dos clases cuyos estilos surtirán efecto.
Además, tenga en cuenta que las clases se utilizan a menudo para definir estilos de comportamiento además de los visuales. Por ejemplo, el complemento de validación de formularios jQuery utiliza en gran medida clases para definir el comportamiento de validación de los elementos (por ejemplo, requerido o no, o definir el tipo de formato de entrada).
Ejemplos de nombres de clases son: etiqueta, comentario, botón de barra de herramientas, mensaje de advertencia o correo electrónico.
Utilice el ID cuando tenga un solo elemento en la página que tomará el estilo. Recuerde que las identificaciones deben ser únicas. En su caso, esta puede ser la opción correcta, ya que presumiblemente solo habrá un div "principal" en la página.
Ejemplos de identificadores son: contenido principal, encabezado, pie de página o barra lateral izquierda.
Una buena forma de recordar esto es que una clase es un tipo de elemento y la identificación es el nombre único de un elemento en la página.
idson únicos
- Cada elemento sólo puede tener uno.
id - Cada página puede tener sólo un elemento con ese
id
classLos es NO son únicos
- Puedes usar el mismo
classen múltiples elementos. - Puede utilizar varios
classes en el mismo elemento.
Javascript se preocupa
La gente de JavaScript probablemente ya esté más en sintonía con las diferencias entre classes y ids. JavaScript depende de que haya solo un elemento de página con un id, de lo contrario getElementByIdno se podría depender de la función comúnmente utilizada.
Para obtener más información sobre esto, haga clic aquí.
Ejemplo
<div id="header_id" class="header_class">Text</div>
#header_id {font-color:#fff}
.header_class {font-color:#000}
(Tenga en cuenta que CSS usa el prefijo # para ID y . para clases).
Sin embargo color , un atributo de etiqueta HTML 4.01 <font>quedó obsoleto en HTML 5. En CSS no hay "color de fuente", el estilo es, colorpor lo que lo anterior debería decir:
Ejemplo
<div id="header_id" class="header_class">Text</div>
#header_id {color:#fff}
.header_class {color:#000}
El texto sería blanco.
