> Faqs > Diferencia entre selector class y selector id en CSS

Diferencia entre selector class y selector id en CSS

En los videotutoriales de selectores de CSS No entendí la diferencia entre selectores class y selectores id. Es decir, en hojas de estilo en cascada vi que unas veces colocas los estilos CSS a través de clases (class) y otras veces a través del atributo id. Vi que para asignar estilos utilizas selectores distintos. Cuando asignas estilos por los id utilizas "#" para construir el seclector y cuando asignas estilos a una clase, utilizas "." para definir el selector. Pero no me quedó claro cuándo debo utilizar class y cuando debo utilizar id.

Respuestas

Esa duda de CSS es bastante básica. Creo que estará explicada con más detenimiento en el Manual de CSS, pero te lo comento rápidamente por aquí.

La diferencia fundamental es que los selectores por identificador están pensados para que el elemento que seleccionas sea único. (Dado que los identificadores (atributos id) de los elementos de la página no se deberían repetir, es decir, los identificadores deben ser únicos).

Sin embargo, las clases están pensadas para poder definir el mismo estilo a varios elementos de la página. Es decir, puedes asignar una misma clase a varias etiquetas sin problemas. De hecho, las clases están pensadas justamente para que las utilices en diversos elementos distintos en la página.

Por ejemplo, si tienes una página con un menú de navegación que aparece una única vez, podrías asignarle un id a la capa donde está la barra de navegación. Ese ID sería único, porque no hay otra barra de navegación igual a esa en la página. El id sería único y entonces sería viable aplicarle el estilo mediante el selector de identificador. Ahora bien, si esa misma barra de navegación la quieres repetir varias veces a lo largo de la página tendrías que crear una clase (class de CSS) y asignarla a cada una de esas barras. De ese modo definirías el estilo una única vez y lo reutilizarías un número indefinido de veces.

Dicho sea de paso, es más interesante aplicar estilos a partir de clases, debido a que esas declaraciones de estilos podrían ser reutilizables.

Miguel Angel
3295 146 215 17

Considera que "id" está pensado para que no lo repitas y lo utilices sólo una vez a pesar de que sí es posible usarlo más de una ocasión. En el caso de "class" está pensado para que lo utilices las veces que sea requerido. Es una de esas reglas no escritas de la programación.

Considera que al usar "id" o "class" debes agrupar tus parámetros que estén relacionados. La intención es que no debas escribir tanto código y simplemente mandar a llamar el estilo que necesites dar. Al hacer esto puedes mezclar "id" y "clases" en una sola línea (<h1 id="principalID" class="claseUno claseDos">). Para explícame bien, velo como un supermercado, en donde no colocan la carne junto al jabón o accesorios de higiene persona si no que tienen un orden.

benjamin
5 1

La mayor diferencia es el uso que se le da a cada una, en el caso de id tamos hablando de una etiqueta mas individual con funcion principalmente para java script, mientras la etiqueta class se puede usar en css y esta misma se la puede reutilizar en varias lineas y con el la misma descripcion de ser necesario, en cambio en el id una ves que se use la etiqueta con cierta descripcion ya no se puede volver a usar esa dscripcion.

fran
0