¿Cuál es la diferencia entre un id y una clase?

Question

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

Veo diferente a los desarrolladores hacer esto en ambos sentidos, y como soy autodidacta, yo nunca me lo imaginé.

Answer 1

ids debe ser único en tanto que class se puede aplicar a muchas cosas. En CSS, ids se ven como elementos #elementID y class parecerse .someClass

En general, utilice id cada vez que desea hacer referencia a un elemento específico y class cuando se tiene un número de cosas que son todos iguales. Por ejemplo, los elementos id comunes son cosas como header, footer, sidebar. class elementos comunes son cosas como highlight o external-link.

Es una buena idea leer sobre la cascada y entender la prioridad asignada a varios selectores: http://www.w3.org/TR/CSS2/cascade.html

La precedencia más básico que se debe entender, sin embargo, es que los selectores id tienen prioridad sobre los selectores class. Si usted ha tenido este:

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

y

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

El texto sería rojo porque el selector id tiene prioridad sobre el selector class.

Answer 2

Tal vez una analogía ayudará a entender la diferencia:

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

Estudiantes ID tarjetas son distintos. No hay dos estudiantes en el campus tendrán el mismo estudiante ID tarjeta. Sin embargo, muchos estudiantes pueden y van a compartir al menos un Clase entre sí.

Está bien para poner varios estudiantes bajo un Clase título, como la biología. Pero nunca es aceptable para poner múltiples estudiantes bajo un estudiante ID .

Al dar Reglas sobre el sistema intercomunicador de la escuela, se puede dar Reglas a Clase

  

"Mañana, todos los estudiantes deben usar una camisa de color rojo a la clase de Biología."

.Biology {
  color: red;
}

O puede dar reglas a un estudiante específico, llamando a su único ID

  

"Jonathan Sampson es usar una camisa verde mañana."

#JonathanSampson {
  color: green;
}

En este caso, Jonathan Sampson está recibiendo dos comandos: uno como estudiante en la clase de Biología, y la otra como una exigencia directa. Debido a Jonathan se le dijo directamente, a través del atributo id, de llevar una camisa verde, que no tendrá en cuenta la anterior solicitud de llevar una camisa roja.

Los selectores más específicos ganan.

Answer 3

donde utilizar un ID frente a una clase

El simple diferencia entre los dos es que mientras que una clase se puede utilizar varias veces en una página, un documento de identidad sólo debe utilizarse una vez por página. Por lo tanto, es apropiado usar un ID en el elemento div que está marcando hasta el contenido principal en la página, ya que sólo habrá una sección de contenido principal. Por el contrario, debe utilizar una clase para establecer alternando colores de fila sobre una mesa, ya que son, por definición, va a ser utilizado más de una vez.

ID son una herramienta muy poderosa. Un elemento con un ID puede ser el blanco de una pieza de JavaScript que manipula el elemento o su contenido de alguna manera. El atributo ID puede ser usado como blanco de un enlace interno, en sustitución de las etiquetas de anclaje con los atributos de nombre. Por último, si usted hace sus identificaciones clara y lógica, que pueden servir como una especie de “auto-documentación” dentro del documento. Por ejemplo, que no necesariamente tiene que agregar un comentario antes de un bloque que indica que un bloque de código contendrá el contenido principal, si la etiqueta de apertura del bloque tiene un diámetro interior de, digamos, "cabecera", "pie de página "principal" ", etc.

Answer 4

Un ID debe ser único en toda la página.

Una clase puede aplicarse a muchos elementos.

A veces, es una buena idea utilizar los identificadores.

En una página, por lo general tienen un pie de página, un encabezado ...

A continuación, el pie de página puede ser en un div con un id

  

y aún así tener una clase

Answer 5

CLASE debe ser utilizado para múltiples elementos que desea que el mismo estilo para. Un ID debe ser por un elemento único. Ver este tutorial .

Se debe consultar la estándares del W3C si quieres ser un estricto conformistas, o si desea que sus páginas sean validado a las normas.

Answer 6

Los identificadores son únicos.Las clases no son.Los elementos también pueden tener múltiples clases.También clases pueden añadirse de forma dinámica y se retira a un elemento.

En cualquier lugar se puede utilizar un ID que usted podría utilizar una clase en su lugar.El inverso no es cierto.

La convención parece ser la utilización de los Identificadores de los elementos de la página que se encuentran en cada página ("navbar" o "menu" (menú) y clases para todo lo demás, pero esto es sólo convención y usted encontrará una amplia variedad en el uso.

Otra diferencia es que para formar los elementos de entrada, el <label> elemento hace referencia a un campo de ID así que usted necesidad de utilizar los Identificadores de si vas a usar <label>.es una de accesibilidad cosa y usted realmente debe utilizar.

En los años pasados por IDs también fueron preferidos porque son fácilmente accesibles en Javascript (getElementById).Con la llegada de jQuery y otros frameworks de Javascript este es bastante no es un problema ahora.

Answer 7

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

IDs son identificadores. Son únicos; nadie más se le permite tener el mismo ID. Identificadores se utilizan para aplicar estilos a un elemento HTML.

Yo uso identificadores 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 cabecera y de contenido puede ser de estilo a través de #header y #content. Cada sección del contenido se puede aplicar un estilo común a través .Sección #content. Sólo por diversión, he añadido una clase "especial" para la sección media. Suponga que desea una sección particular de tener un estilo especial. Esto se puede lograr con la clase .Special, sin embargo, sigue siendo la sección hereda los estilos comunes de .Sección #content.

Cuando hago JavaScript o CSS desarrollo, que normalmente utilizan números de identificación para acceder a / manipular un elemento HTML muy específico, y utilizo el acceso a clases / aplicar estilos a una amplia gama de elementos.

Answer 8

CSS está orientada objeto. Identificación dice ejemplo, la clase dice clase.

Answer 9

espacio selector CSS permite en realidad para el estilo Identificación del condicional:

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

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

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

En lo personal, prefiero selectores classname más largos:

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

como encuentre el uso de identificadores anidados para diferenciar el tratamiento a ser un poco perverso. Sólo sé que como desarrolladores en el Sass / SCSS mundo consiguen sus manos en esta materia, los ID anidados están convirtiendo en la norma.

Por último, cuando se trata de selección de rendimiento y la precedencia, ID tiende a ganar fuera. Este es un tema totalmente otra.

Answer 10

Al aplicar CSS, que se aplican a una clase y tratar de evitar lo más que pueda para un id. El ID sólo se debe utilizar en JavaScript para ir a buscar el elemento o para cualquier unión evento.

Las clases deben ser utilizados para aplicar CSS.

A veces usted tiene que utilizar las clases para la unión evento. En tales casos, tratar de evitar las clases que se utilizan para aplicar CSS y más bien añadir nuevas clases que no tienen correspondiente CSS. Esto vendrá a ayudar cuando es necesario cambiar las reglas CSS de cualquier clase o cambiar el nombre de la clase CSS todos juntos para cualquier elemento.

Answer 11

Cualquier elemento puede tener una clase o un id.

Una clase se utiliza para hacer referencia a un cierto tipo de pantalla, por ejemplo, puede haber una clase css para un div que representa la respuesta a esta pregunta. Ya que habrá muchas respuestas, varias Div tendrían el mismo estilo y que utilizarían una clase.

Un ID se refiere a un solo elemento, por ejemplo la sección correspondiente a la derecha puede tener styling específico para no reutilizados en otros lugares, que usaría un id.

Técnicamente puede utilizar clases para todos, o separarlos lógicamente. No se puede, sin embargo, la reutilización de identificación de múltiples elementos.

Answer 12

Clase es para aplicar su estilo a un grupo de elementos. estilos de la identificación aplican sólo el elemento con ese ID (sólo debería haber uno). Por lo general, utiliza las clases, pero si hay un hecho aislado puede utilizar los ID (o sólo se adhieren al estilo directamente en el elemento).

Answer 13

En el desarrollo avanzado id s que básicamente podemos utilizar JavaScript.

A los efectos repetibles, clases es contraria a mano para venir id s, que se supone que es único.

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 se puede ver aquí box y box1 son dos (2) diferente <div> elementos, pero podemos aplicar las clases box y bg-color-red a ambos.

El concepto es la herencia en una POO idioma.

Answer 14

1) div id no es reutilizable y sólo se debe aplicar a un elemento de HTML mientras div clase se puede añadir a varios elementos.

2) una identificación tiene mayor importancia si ambos están aplicadas al mismo elemento y tienen estilos en conflicto, se aplicarán los estilos del ello.

3) elemento estilo siempre se refieren a una clase div poniendo una. (Punto) en frente de sus nombres mientras que la clase div id se conoce por poner un # (almohadilla) delante de sus nombres.

4) Ejemplo: -

  

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

     

Identificación de declaración <style> -   #blue-background {background-color: blue;}

     

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