html - uso - selectores id y class en css
Diferencia entre id y clase en CSS y cuándo usarlo (15)
A diferencia del selector de id , el selector de 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 de class utiliza el atributo de clase HTML y se define con un "."
Una manera simple de verlo es que una identificación es única para un solo elemento. class es mejor usar, ya que te ayudará a ejecutar lo que quieras.
Esta pregunta ya tiene una respuesta aquí:
- div class vs id 22 respuestas
<style>
#main{
background: #000;
border: 1px solid #AAAAAA;
padding: 10px;
color: #fff;
width: 100px;
}
</style>
<div id="main">
Welcome
</div>
Aquí di una id al elemento div y está aplicando el CSS correspondiente para ello.
O
<style>
.main{
background: #000;
border: 1px solid #AAAAAA;
padding: 10px;
color: #fff;
width: 100px;
}
</style>
<div class="main">
Welcome
</div>
Ahora aquí di una class al div y también está haciendo el mismo trabajo para mí.
Entonces, ¿cuál es la diferencia exacta entre la id y la class y cuándo debo usar la id y cuándo debo usar la class ? Soy un novato en CSS y diseño web y estoy un poco confundido al lidiar con esto.
Como casi todos los demás han dicho usar ID para elementos únicos y clase para elementos de uso múltiple.
Aquí hay un ejemplo rápido, más que simplificado, tome etiquetas HTML y HEAD como leídas
<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>
Además, como se menciona en otras respuestas ID están bien expuestos a JavaScript, las clases menos. Sin embargo, los frameworks javascript modernos como jQuery leverage class para javascript también
El atributo de class se puede usar con múltiples elementos / etiquetas HTML y todos tendrán el efecto. Donde el id está destinado a un único elemento / etiqueta y se considera único.
Sin embargo, la id tiene un valor de especificidad más alto que la class .
Esto es muy simple de entender:
id se usa cuando tenemos que aplicar propiedad CSS a un solo atributo.
class 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 diseño de div y botones con miradas fugaces, usamos id.
para el mismo CSS en toda la página o proyecto usamos clase
La identificación es liviana y la clase es poco pesada
Los ID deben ser únicos: 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, desearía usar una ID para "principal" porque es (supuestamente) única; es la div "principal" que sirve como contenedor para su otro contenido y solo habrá una.
Si tiene un grupo de botones de menú o algún otro elemento para el cual desea que se repita el estilo, los asignaría a todos a la misma clase y luego daría estilo a esa clase.
Los ID tienen la funcionalidad para funcionar como enlaces a secciones particulares dentro de una página web. una palabra clave después de # etiqueta lo 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 una identificación de " sección5 " en la sección del capítulo 5 de la página.
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 usa el prefijo # para los ID y . Para las clases).
Sin embargo, el color era un atributo de etiqueta HTML 4.01 <font> desaprobado en HTML 5. En CSS no hay "color de fuente", el estilo es el color por lo que debe leer lo siguiente:
Ejemplo
<div id="header_id" class="header_class">Text</div>
#header_id {color:#fff}
.header_class {color:#000}
El texto sería blanco
Puedes asignar una class a muchos elementos. También puede asignar más de una class a un elemento, ej.
<button class="btn span4" ..>
en Bootstrap. Puede asignar la id solo a uno. Entonces, si quieres que muchos elementos tengan el mismo aspecto, ej. lista elementos, tu eliges class . Si desea activar ciertas acciones en un elemento que usa JavaScript, probablemente use id .
Si hay algo que agregar a las buenas respuestas anteriores, es para explicar por qué los id deben ser únicos por página. Esto es importante de entender para un principiante porque aplicar el mismo id a múltiples elementos dentro de la misma página no desencadenará ningún error y tendrá los mismos efectos que una class .
Entonces, desde una perspectiva de HTML / CSS, la exclusividad de la id por página no tiene sentido. Pero desde la perspectiva de JavaScript, es importante tener una id por elemento por página porque getElementById() identifica, como su nombre lo sugiere, los elementos por sus id .
Por lo tanto, incluso si es un desarrollador de HTML / CSS puro, debe respetar el aspecto de exclusividad de los id s por página por dos buenas razones:
- Claridad: cada vez que ve una identificación, está seguro de que no existe en ningún otro lugar dentro de la misma página
- Scalability : incluso si está desarrollando solo en HTML / CSS, debe tener en cuenta el día en que usted u otro desarrollador continuará para mantener y agregar funcionalidad a su sitio web en JavaScript.
Una clase se puede usar varias veces, mientras que una 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 todos los párrafos en tu página web el mismo estilo, usarías clases.
Los estándares especifican que cualquier nombre de ID dado solo puede referenciarse una vez dentro de una página o documento. Use ID cuando solo hay una ocurrencia por página. Use clases cuando haya una o más ocurrencias por página.
Una manera simple de verlo es que una identificación es única para un solo elemento.
Una clase no es única y se aplica a múltiples elementos.
Por ejemplo:
<p class = "content">This is some random <strong id="veryImportant"> stuff!</strong></p>
El contenido es una clase, ya que probablemente también se aplique a otras etiquetas, ya que "muy importante" solo se usa una vez y nunca más.
selector de id se puede utilizar para más elementos. aquí está 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 (versión 11.0) y Chrome (versión 47.0). funciona en ambos.
Lo "único" solo significa que un elemento no puede tener más de un atributo de id como selector de clase. Ninguno
<p id="t_color f_style">...</p>
ni
<p id="t_color" id="f_style">...</p>
id son únicos
- Cada elemento puede tener solo una
id - Cada página puede tener solo un elemento con esa
id
class no son únicas
- Puedes usar la misma
classen múltiples elementos. - Puedes usar múltiples
classen el mismo elemento.
Javascript se preocupa
Es probable que las personas con JavaScript ya estén más en sintonía con las diferencias entre las class y los id . JavaScript depende de que haya un solo elemento de página con un id particular, o de lo contrario no se puede depender de la función getElementById uso común.
carné de identidad:
Identificará el elemento único de su página completa. Ningún otro elemento debe declararse con la misma identificación. El selector de id. Se usa para especificar un estilo para un elemento único y único. El selector de 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 con mayor frecuencia 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 "."
Use una clase cuando desee dar estilo de manera consistente a múltiples elementos en 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 en enlaces relacionados.
Además, un elemento dado puede tener más de una clase asociada a él, mientras que un elemento solo puede tener una identificación. Por ejemplo, puede darle a un 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 jQuery form validator usa mucho las clases para definir el comportamiento de validación de los elementos (por ejemplo, requiere o no, o define el tipo de formato de entrada)
Algunos ejemplos de nombres de clase son: etiqueta, comentario, barra de herramientas, mensaje de advertencia o correo electrónico.
Use la ID cuando tenga un solo elemento 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.
Algunos ejemplos de ids 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.