Cómo elegir entre `clase` e ​​`id`

4 minutos de lectura

avatar de usuario
Pablo

Cuando usas divs ¿Cuándo es mejor usar un class contra id?

¿Es mejor usar class, en decir variante de fuente o elementos dentro del html? Entonces usa id para la estructura/contenedores?

Esto es algo en lo que siempre he estado un poco inseguro, cualquier ayuda sería genial.

  • Esta pregunta se aplica no solo a los elementos div, sino a todos los elementos en una página HTML.

    – BrewinBombers

    17 de septiembre de 2008 a las 19:04

  • Posible duplicado, stackoverflow.com/q/1215618/425313

    – Brad Koch

    2 de mayo de 2013 a las 3:22

  • Posible duplicado de ¿Cuál es la diferencia entre una identificación y una clase?

    – mfluehr

    18 de septiembre de 2019 a las 13:15

Usar id para identificar elementos de los que solo habrá una única instancia en una página. Por ejemplo, si tiene una sola barra de navegación que está colocando en una ubicación específica, use id="navigation".

Usar class para agrupar elementos que se comportan de cierta manera. Por ejemplo, si desea que el nombre de su empresa aparezca en negrita en el cuerpo del texto, puede usar <span class="company">.

Lo más importante que debe comprender es que las ID deben ser únicas: solo debe existir un elemento con una ID dada dentro de una página. Por lo tanto, si desea hacer referencia a un elemento de página específico, a menudo es lo mejor que puede usar.

Si tiene varios elementos que son similares de alguna manera, debe usar la clase de elementos para identificarlos.

Un hecho muy útil y sorprendentemente poco conocido es que en realidad se pueden aplicar varias clases a un solo elemento poniendo espacios entre los nombres de las clases. Por lo tanto, si publicó una pregunta escrita por el usuario conectado actualmente, puede identificarla con

.

  • La información adicional aquí sobre el uso de múltiples clases es especialmente útil. Buen trabajo incluyéndolo.

    – BrewinBombers

    17 de septiembre de 2008 a las 19:01

avatar de usuario
Sansón

Piensa en la Universidad.

<student id="JonathanSampson" class="Biology" />
<student id="MarySmith" class="Biology" />

Alumno IDENTIFICACIÓN las cartas son distintas. No habrá dos estudiantes en el campus que tengan el mismo estudiante. IDENTIFICACIÓN tarjeta. Sin embargo, muchos estudiantes pueden y compartirán al menos una Clase juntos.

Está bien poner varios estudiantes bajo uno Clase título, Biología 101. Pero nunca es aceptable poner varios estudiantes bajo un solo estudiante IDENTIFICACIÓN.

al dar Normas a través del sistema de intercomunicación de la escuela, puede dar Normas a un Clase:

“¿Podría la clase de Biología usar Camisas Rojas mañana?”

.BiologyClass {
  shirt-color:red;
}

O puede dar reglas a un estudiante específico, llamando a su único IDENTIFICACIÓN:

“¿Podría Jonathan Sampson usar una camisa verde mañana?”

#JonathanSampson {
  shirt-color:green;
}

  • Esas reglas serían épicas si se aplicaran en la vida real en una universidad.

    usuario142019

    21 de junio de 2011 a las 4:11

avatar de usuario
oli

Los ID deben ser únicos, pero en CSS también tienen prioridad al determinar cuál de las dos instrucciones en conflicto seguir.

<div id="section" class="section">Text</div>
#section {font-color:#fff}
.section {font-color:#000}

El texto sería blanco.

avatar de usuario
Dave Rutledge

Un beneficio adicional de usar una identificación es la capacidad de orientarla en una etiqueta de anclaje:

<h2 id="CurrentSale">Product I'm selling</h2>

Le permitirá en algún otro lugar vincular directamente a ese lugar en la página:

<a href="#CurrentSale">the Current Sale</a>

Un uso común para esto sería dar a cada título de un blog un ID con fecha (por ejemplo, id=”date20080408″) que le permitiría dirigirse específicamente a esa sección de la página del blog.

También es importante recordar que existen reglas de nomenclatura más restringidas para los identificadores, principalmente que no pueden comenzar con un número. Ver pregunta SO similar: ¿Cuál es un valor válido para los atributos de identificación en html?

avatar de usuario
mike granjero

Las clases son excelentes cuando desea aplicar estilos similares a muchos divs o elementos diferentes. Los identificadores son buenos cuando desea abordar un elemento específico para formatear o actualizar con javascript.

avatar de usuario
Mecki

El estándar HTML en sí mismo responde a su pregunta:

Dos objetos no pueden tener el mismo ID, pero una cantidad arbitraria de objetos puede tener la misma clase.

Entonces, si desea aplicar ciertos atributos de estilo CSS a un solo DIV, eso sería una ID. Si desea que ciertos atributos de estilo se apliquen a varios DIV, debe ser una clase.

Tenga en cuenta que puede mezclar ambos. Puede hacer que dos DIV pertenezcan a la misma clase, pero darles ID diferentes. Luego puede aplicar el estilo común a ambos a la clase y las cosas específicas de cualquiera de ellos a su ID. El navegador primero aplicará el estilo de clase y luego el estilo de ID, por lo que los estilos de ID pueden sobrescribir lo que una clase haya establecido antes.

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad