¿Cuál es la diferencia entre una identificación y una clase?

¿Cuál es la diferencia entre <div class="">y <div id="">cuando se trata de CSS? ¿Está bien usarlo <div id="">?

Veo a diferentes desarrolladores haciendo esto de ambas maneras, y como soy autodidacta, nunca lo he descubierto.

idsdebe ser único donde classse pueda aplicar a muchas cosas. En CSS, se idven los elementos #elementIDy los classelementos.someClass

En general, úselo idcuando quiera referirse a un elemento específico y classcuando tenga una cantidad de cosas que se parecen. Por ejemplo, comunes idelementos son cosas como header, footer, sidebar. Los classelementos comunes son cosas como highlighto external-link.

Es una buena idea leer en cascada y comprender la precedencia asignada a varios selectores: http://www.w3.org/TR/CSS2/cascade.html

Sin embargo, la prioridad más básica que debe comprender es que los idselectores tienen prioridad sobre los classselectores. Si tuvieras esto:

<p id="intro" class="foo">Hello!</p>

y:

#intro { color: red }
.foo { color: blue }

El texto sería rojo porque el idselector tiene prioridad sobre el classselector.

Quizás una analogía ayudará a comprender la diferencia:

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

Las tarjetas de identificación del estudiante son distintas. No hay dos estudiantes en el campus que tengan la misma tarjeta de identificación de estudiante . Sin embargo, muchos estudiantes pueden y compartirán al menos una clase entre ellos.

Está bien poner a varios estudiantes bajo un título de Clase , como Biología. Pero nunca es aceptable poner a varios estudiantes bajo una identificación de estudiante .

Al dar Reglas sobre el sistema de intercomunicación de la escuela, puede dar Reglas a una clase :

"Mañana, todos los estudiantes deben usar una camisa roja para la clase de biología".

.Biology {
  color: red;
}

O puede dar reglas a un estudiante específico, llamando a su único identificación :

"Jonathan Sampson se pondrá una camisa verde mañana".

#JonathanSampson {
  color: green;
}

En este caso, Jonathan Sampson recibe dos comandos: uno como estudiante en la clase de biología y otro como requisito directo. Debido a que a Jonathan se le dijo directamente, a través del atributo id, que use una camisa verde, no tendrá en cuenta la solicitud anterior de usar una camisa roja.

Los selectores más específicos ganan.

Dónde usar una identificación versus una clase

La simple diferencia entre los dos es que, si bien una clase se puede usar repetidamente en una página, una ID solo se debe usar una vez por página. Por lo tanto, es apropiado usar una ID en el elemento div que marca el contenido principal en la página, ya que solo habrá una sección de contenido principal. Por el contrario, debe usar una clase para configurar colores de fila alternos en una tabla, ya que, por definición, se usarán más de una vez.

Las identificaciones son una herramienta increíblemente poderosa. Un elemento con una ID puede ser el objetivo de una pieza de JavaScript que manipula el elemento o su contenido de alguna manera. El atributo ID se puede usar como el objetivo de un enlace interno, reemplazando las etiquetas de anclaje con atributos de nombre. Finalmente, si hace que sus ID sean claras y lógicas, pueden servir como una especie de "auto documentación" dentro del documento. Por ejemplo, no necesariamente necesita agregar un comentario antes de un bloque que indique que un bloque de código contendrá el contenido principal si la etiqueta de apertura del bloque tiene una ID de, por ejemplo, "main", "header", "footer ", etc.

Una identificación debe ser única en toda la página.

Una clase puede aplicarse a muchos elementos.

A veces, es una buena idea usar identificadores.

En una página, generalmente tienes un pie de página, un encabezado ...

Entonces el pie de página puede estar en un div con una identificación

<div id = "footer" class = "...">

y todavía tengo una clase

Se debe usar una CLASE para múltiples elementos para los que desea el mismo estilo. Una identificación debe ser para un elemento único. Mira este tutorial .

Debe consultar los estándares del W3C si desea ser un estricto conformista o si desea que sus páginas se validen según los estándares.

Las identificaciones son únicas. Las clases no lo son. Los elementos también pueden tener múltiples clases. También las clases se pueden agregar y eliminar dinámicamente a un elemento.

En cualquier lugar donde pueda usar una ID, puede usar una clase en su lugar. Lo opuesto no es verdad.

La convención parece ser el uso de ID para elementos de página que están en cada página (como "barra de navegación" o "menú") y clases para todo lo demás, pero esto es solo convención y encontrará una gran variación en el uso.

Otra diferencia es que para los elementos de entrada de formulario, el <label>elemento hace referencia a un campo por ID, por lo que debe usar ID si va a usar<label> . es una cosa de accesibilidad y realmente deberías usarla.

En años pasados, las identificaciones también se preferían porque son fácilmente accesibles en Javascript (getElementById). Con el advenimiento de jQuery y otros marcos de Javascript, esto ya no es un problema.

Las clases son como categorías. Muchos elementos HTML pueden pertenecer a una clase, y un elemento HTML puede tener más de una clase. Las clases se utilizan para aplicar estilos generales o estilos que se pueden aplicar en varios elementos HTML.

Las identificaciones son identificadores. Son únicos; nadie más puede tener esa misma identificación. Las ID se utilizan para aplicar estilos únicos a un elemento HTML.

Yo uso identificaciones y clases de esta manera:

<div id="header">
  <h1>I am a header!</h1>
  <p>I am subtext for a header!</p>
</div>
<div id="content">
  <div class="section">
    <p>I am a section!</p>
  </div>
  <div class="section special">
    <p>I am a section!</p>
  </div>
  <div class="section">
    <p>I am a section!</p>
  </div>
</div>

En este ejemplo, las secciones de encabezado y contenido se pueden diseñar a través de #header y #content. Cada sección del contenido se puede aplicar un estilo común a través de #content .section. Solo por diversión, agregué una clase "especial" para la sección central. Suponga que desea que una sección en particular tenga un estilo especial. Esto se puede lograr con la clase .special, aunque la sección aún hereda los estilos comunes de #content .section.

Cuando desarrollo JavaScript o CSS, normalmente uso ID para acceder / manipular un elemento HTML muy específico, y uso clases para acceder / aplicar estilos a una amplia gama de elementos.

CSS está orientado a objetos. ID dice instancia, clase dice clase.

Al aplicar CSS, aplíquelo a una clase e intente evitar todo lo que pueda a una identificación. El ID solo debe usarse en JavaScript para recuperar el elemento o para cualquier enlace de evento.

Las clases deben usarse para aplicar CSS.

A veces tiene que usar clases para el enlace de eventos. En tales casos, intente evitar las clases que se están utilizando para aplicar CSS y agregue nuevas clases que no tengan CSS correspondiente. Esto será útil cuando necesite cambiar el CSS para cualquier clase o cambiar el nombre de la clase CSS todos juntos para cualquier elemento.

El espacio del selector CSS en realidad permite un estilo de identificación condicional:

h1#my-id {color:red}
p#my-id {color:blue}

rendirá como se esperaba. ¿Por qué harías esto? A veces, las ID se generan dinámicamente, etc. Un uso adicional ha sido renderizar títulos de manera diferente en función de una asignación de ID de alto nivel:

body#list-page #title {font-size:56px}
body#detail-page #title {font-size:24px}

Personalmente, prefiero selectores de nombre de clase más largos:

body#list-page .title-block > h1 {font-size:56px}

Como encuentro, el uso de ID anidadas para diferenciar el tratamiento es un poco perverso. Solo sepa que a medida que los desarrolladores en el mundo Sass / SCSS tengan en sus manos estas cosas, las identificaciones anidadas se están convirtiendo en la norma.

Finalmente, cuando se trata de rendimiento y precedencia del selector, la ID tiende a ganar. Este es un tema completamente diferente.

Cualquier elemento puede tener una clase o un id.

Una clase se utiliza para hacer referencia a un determinado tipo de visualización, por ejemplo, puede tener una clase css para un div que representa la respuesta a esta pregunta. Como habrá muchas respuestas, múltiples divs necesitarían el mismo estilo y usarías una clase.

Una identificación se refiere a un solo elemento, por ejemplo, la sección relacionada a la derecha puede tener un estilo específico que no se reutiliza en otro lugar, usaría una identificación.

Técnicamente, puede usar clases para todo o dividirlas lógicamente. Sin embargo, no puede reutilizar las identificaciones para varios elementos.

La clase es para aplicar tu estilo a un grupo de elementos. Los estilos de ID se aplican solo al elemento con esa ID (solo debe haber uno). Por lo general, usa clases, pero si hay una única vez, puede usar ID (o simplemente pegar el estilo directamente en el elemento).

En ID de desarrollo avanzado , básicamente podemos usar JavaScript.

Para propósitos repetibles, las clases son prácticas contrarias a las identificaciones que se supone que son únicas.

A continuación se muestra un ejemplo que ilustra las expresiones anteriores:

<div id="box" class="box bg-color-red">this is a box</div>
<div id="box1" class="box bg-color-red">this is a box</div>

Ahora puede ver aquí boxy box1hay dos (2) <div>elementos diferentes , pero podemos aplicar las clases boxy bg-color-reda ambos.

El concepto es herencia en un lenguaje OOP .

1) div id no es reutilizable y solo debe aplicarse a un elemento de HTML, mientras que la clase div se puede agregar a varios elementos.

2) Una identificación tiene mayor importancia si ambas se aplican al mismo elemento y tienen estilos en conflicto, se aplicarán los estilos de la identificación.

3) El elemento de estilo siempre se refiere a una clase div poniendo a. (punto) delante de sus nombres mientras se hace referencia a la clase div id poniendo un # (hash) delante de sus nombres.

4) Ejemplo: -

clase en <style>declaración.red-background { background-color: red; }

ID en la <style>declaración: #blue-background {background-color: blue;}

<div class="red-background" id="blue-background">Hello</div> Aquí el fondo será de color azul.

idy classson dos atributos HTML globales / estándar (los siguientes atributos globales se pueden usar en cualquier elemento HTML).

class Especifica uno o más nombres de clase para un elemento (se refiere a una clase en una hoja de estilo)

id Especifica una identificación única para un elemento

Los atributos id proporcionan un identificador único de todo el documento del elemento donde el atributo de clase proporciona una forma de clasificar elementos similares.

El valor del atributo id debe ser único en la página HTML, donde el atributo de clase se puede reutilizar donde quiera aplicar las mismas propiedades.

La clase se usa para múltiples elementos que tienen atributos comunes. Ejemplo, si desea el mismo color y fuente para la etiqueta p y body, use el atributo class o en una división misma.

El ID, por otro lado, se usa para resaltar los atributos de un solo elemento y se usa exclusivamente para un elemento en particular. Por ejemplo, tenemos una etiqueta h1 con algunos atributos que no queremos que repitan en ningún otro elemento de la página.

Cabe señalar que si usamos class e id en un elemento, * id anula los atributos de la clase. * Simplemente porque id es exclusivamente para un solo elemento

Consulte el siguiente ejemplo

<html>
<head>
<style>
    #html_id{
        color:aqua;
        background-color: black;

    }
    .html_class{
        color:burlywood;
        background-color: brown;
    }
</style>

   </head>
    <body>
<p  class="html_class">Lorem ipsum dolor sit amet consectetur adipisicing 
   elit. 
    Perspiciatis a dicta qui unde veritatis cupiditate ullam quibusdam! 
     Mollitia enim, 
    nulla totam deserunt ex nihil quod, eaque, sed facilis quos iste.</p>
    </body>
   </html>

Generamos la salida

Salida