Diferencia entre id y clase en CSS y cuándo usarlo [duplicar]
Esta pregunta ya tiene una respuesta aquí:
- ¿Cuál es la diferencia entre un id y una clase? 14 respuestas
<style>
#main{
background: #000;
border: 1px solid #AAAAAA;
padding: 10px;
color: #fff;
width: 100px;
}
</style>
<div id="main">
Welcome
</div>
Aquí le di un id al elemento div y está aplicando el CSS relevante para él.
O
<style>
.main{
background: #000;
border: 1px solid #AAAAAA;
padding: 10px;
color: #fff;
width: 100px;
}
</style>
<div class="main">
Welcome
</div>
Ahora aquí le di un class a la div y también está haciendo el mismo trabajo para me.
, Entonces ¿cuál es la diferencia exacta entre id y class y cuando debo usar id y cuando debo usar class. Soy un novato en CSS y diseño web y un poco confundido al tratar con esto.
15 answers
Para 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 utiliza el prefijo # para IDs y . para las clases.)
Sin embargo color era un atributo de etiqueta HTML 4.01 <font> obsoleto en HTML 5.
En CSS no hay "font-color", el estilo es color por 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.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-04-06 13:27:03
-
Use una clase cuando desee estilizar consistentemente varios elementos en toda la página/sitio. Las clases son útiles cuando tiene, o posiblemente tendrá en el futuro, más de un elemento que comparte el mismo estilo. Un ejemplo puede ser un div de "comentarios" o un cierto estilo de lista para usar para enlaces relacionados.
Además, un elemento dado puede tener más de una clase asociada a él, mientras que un elemento solo puede tener un id. Por ejemplo, puede dar una div dos clases cuyos estilos tendrá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 validador de formularios de jQuery utiliza en gran medida clases para definir el comportamiento de validación de elementos (por ejemplo, requerido o no, o definir el tipo de formato de entrada)
Ejemplos de nombres de clase son: etiqueta, comentario, botón de barra de herramientas, mensaje de advertencia o correo electrónico.
-
Use el ID cuando tenga una elemento único en la página que tomará el estilo. Recuerde que los ID deben ser únicos. En su caso, esta puede ser la opción correcta, ya que presumiblemente solo habrá un div "principal" en la página.
Ejemplos de ids son: contenido principal, encabezado, pie de página o barra lateral izquierda.
Una buena manera de recordar esto es una clase es un tipo de elemento y el id es el nombre único de un elemento en la página.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-10-15 04:52:04
ids son únicos
- Cada elemento puede tener solo un
id - Cada página puede tener solo un elemento con ese
id
classlas es NO son únicas
- Puede usar el mismo
classen varios elementos. - Puede usar múltiples
classes en el mismo elemento.
Javascript cares
JavaScript la gente ya está probablemente más en sintonía con las diferencias entre class es y ids. JavaScript depende de que solo haya un elemento de página con cualquier id en particular, o de lo contrario, no se podría depender de la función getElementById comúnmente utilizada.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-12-30 11:47:09
Id debe ser único-que no puede tener más de un elemento con el mismo ID en un documento html. Las clases se pueden usar para múltiples elementos. En este caso, querrás usar un ID para " main "porque es (presumiblemente) único it es el div" main " que sirve como contenedor para tu otro contenido y solo habrá uno.
Si tiene un montón de botones de menú o algún otro elemento para el que desea que se repita el estilo, los asignaría a todos a la misma clase y luego al estilo esa clase.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-10-15 04:40:40
Como casi todos los demás han dicho use ID para elementos únicos y class para elementos de uso múltiple.
Aquí hay un ejemplo rápido y simplificado, tome las etiquetas HTML y HEAD como se lee
<body>
<div id="leftCol">
You will only have one left column
</div>
<div id="mainContent">
Only one main content container, but.....
<p class="prettyPara">You might want more than one pretty paragraph</p>
<p>This one is boring and unstyled</p>
<p class="prettyPara">See I told you, you might need another!</p>
</div>
<div class="footer">
Not very HTML5 but you'll likely only have one of these too.
</div>
</body>
También, como se mencionó en otras respuestas ID están bien expuestos a javascript, clases menos. Sin embargo, los marcos de javascript modernos como jQuery aprovechan la clase para javascript también
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-10-15 04:52:19
El atributo class se puede usar con múltiples elementos/etiquetas HTML y todos tendrán el efecto. Donde as el id está destinado a un solo elemento / etiqueta y se considera único.
Más allá de que el id tenga un valor de especificidad más alto que el class.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-10-15 04:40:41
Los ID tienen la funcionalidad de trabajar como enlaces a secciones particulares dentro de una página web. una palabra clave después de # tag te llevará a una sección particular de la página web. por ejemplo " http://exampleurl.com#chapter5" en la barra de direcciones lo llevará allí cuando tenga un id de "section5" envuelto alrededor de la sección del capítulo 5 de la página.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-07-08 17:22:39
Puede asignar un class a muchos elementos. También puede asignar más de un class a un elemento, por ejemplo.
<button class="btn span4" ..>
En Bootstrap. Puede asignar el id solo a uno.
Así que si quieres hacer que muchos elementos se vean iguales, por ejemplo. lista de elementos, usted elige class. Si desea activar ciertas acciones en un elemento usando JavaScript, probablemente utilizará id.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-10-15 04:40:48
Una clase se puede usar varias veces, mientras que un ID solo se puede usar una vez, por lo que debe usar clases para elementos que sabe que va a usar mucho. Un ejemplo sería si quisieras dar a todos los párrafos en tu página web el mismo estilo, usarías clases.
Los estándares especifican que cualquier nombre de ID solo puede ser referenciado una vez dentro de una página o documento. Use IDs cuando solo haya una ocurrencia por página. Use clases cuando haya una o más ocurrencias por página.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-10-15 04:41:09
Id:
Identificará el elemento único de toda tu página. Ningún otro elemento debe ser declarado con el mismo id. El selector id se utiliza para especificar un estilo para un elemento único. El selector id utiliza el atributo id del elemento HTML, y se define con un"#".
Clase:
El selector de clase se utiliza para especificar un estilo para un grupo de elementos. A diferencia del selector de id, el selector de clase se usa más a menudo en varios elementos.
Esto le permite establecer un estilo particular para muchos elementos HTML con la misma clase.
El selector de clase utiliza el atributo de clase HTML, y se define con un "."
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-10-15 04:43:38
Esto es muy simple de entender: -
Id se usa cuando tenemos que aplicar la propiedad CSS a un solo atributo.
La clase se usa cuando tenemos que usar la propiedad CSS en muchas ubicaciones dentro de la misma página o diferentes.
General :- para una estructura única como el div que mira fijamente y el diseño de botones usamos id .
Para el mismo CSS en toda la página o proyecto usamos la clase
El id es ligero y la clase es poco pesada
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-10-15 04:44:22
Una forma sencilla de verlo es que un id es único para un solo elemento.
Una clase no es única y se aplica a varios elementos.
Por ejemplo:
<p class = "content">This is some random <strong id="veryImportant"> stuff!</strong></p>
El contenido es una clase, ya que probablemente se aplicará a otras etiquetas también donde as "veryImportant" solo se usa una vez y nunca más.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-10-15 04:51:36
Si hay algo que añadir a las buenas respuestas anteriores, es explicar por qué ids deben ser únicas por página. Esto es importante de entender para un principiante porque aplicar el mismo id a varios elementos dentro de la misma página no activará ningún error y más bien tiene los mismos efectos que un class.
Así que desde una perspectiva HTML/CSS, la singularidad de id por página no hace un sentido. Pero desde la perspectiva de JavaScript, es importante tener uno id por elemento por página porque getElementById() identifica, como su nombre indica, los elementos por sus ids.
Así que incluso si eres un desarrollador HTML/CSS puro, debes respetar el aspecto único de id s por página por dos buenas razones:
- Claridad: cada vez que ve un id, está seguro de que no existe en ningún otro lugar dentro de la misma página{[18]]}
- Escalabilidad : Incluso si está desarrollando solo en HTML / CSS, debe tener en cuenta el día en que usted o un otro desarrollador pasará a mantener y agregar funcionalidad a su sitio web en JavaScript.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-08-10 11:06:33
A diferencia del selector id, el selector class se usa con mayor frecuencia en varios elementos.
Esto le permite establecer un estilo particular para muchos elementos HTML con la misma clase.
El selector class utiliza el atributo clase HTML, y se define con un "."
Una forma sencilla de verlo es que un id es único para un solo elemento. class es mejor usarlo, ya que te ayudará a ejecutar lo que quieras.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-10-03 06:16:00
El selector Id se puede usar para más elementos. este es el ejemplo:
Css:
#t_color{
color: red;
}
#f_style{
font-family: arial;
font-size: 20px;
}
Html:
<p id="t_color"> test only </p>
<div id="t_color">the box text</div>
Probé en Internet explorer (ver. 11.0) y Chrome (ver.47.0). funciona en ambos.
El "único" solo significa que un elemento no puede tener más de un atributo id como el selector de clases. [5]]}
<p id="t_color f_style">...</p>
Ni
<p id="t_color" id="f_style">...</p>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-12-22 23:12:52