En el presente tutorial hablaremos sobre las diferencias entre el selector de Id y el selector de Clase y cuando debemos usar cada uno de estos correctamente.

Cuando nos iniciamos en la maquetación de sitios web, nos topamos con una duda que seguramente le ha pasado a más de uno, ¿Debemos usar el selector de “id” o el selector de "class" para brindar estilos a nuestros elementos y qué diferencia existe entre estos dos selectores? En este post te ayudaremos a entender cuándo y por qué utilizar uno u otro, para ello es importante tener clara la definición de ambos.

El valor del atributo “id” de un elemento es único; es decir, no debería haber otro elemento con el mismo nombre de identificador (id) dentro de tu documento HTML. Para declarar un selector de "id" lo podemos hacer de la siguiente manera.

Dentro de los selectores que tenemos en CSS (por tipo, por clase y por id), cada uno tiene un determinado peso, siendo el Selector de Id el que tiene más peso (1-0-0), seguido del selector de Clase (0-1-0) y finalmente el selector de tipo (0-0-1). Para que quede más claro lo anterior, si tenemos una etiqueta con un id = “rojo” y una class = “azul” a esta etiqueta se le aplicarán las propiedades establecidas a #rojo {} porque tiene un peso mayor.¿Es posible tener más de un elemento con el mismo identificador de Id?, ¿las propiedades sí se aplican?

Como vemos en el ejemplo, las propiedades sí se aplican, pero semánticamente esto no es correcto y no se debería usar de esa manera, ya que un elemento HTML debería tener un único valor del atributo "id" no repetible en otros elementos. Por otra parte, el valor del atributo “class”, a diferencia del valor del atributo “id”, puede ser utilizado en más de un elemento de tu documento HTML, esto nos es muy beneficioso cuando tenemos que aplicar los mismos estilos a diferentes elementos, dado que nos permite reducir las líneas de código en nuestro archivo .css, considerándose una buena práctica. Podemos utilizar un selector de clase de la siguiente manera:

Entonces si queremos aplicar las propiedades de un selector de clase a varios elementos, podemos hacerlo de la siguiente manera:

En el ejemplo estamos creamos el selector de clase “pkmn”, el cual contiene propiedades generales que aplicamos a todos los elementos; luego, dejando un espacio agregamos otro selector de clase donde establecemos un determinado color para cada elemento, de esta forma modificamos el color de cada elemento sin tener que escribir todo el código para cada una. Ahora que ya conocemos las características de los atributos "id" y "class" podremos elegir mejor si trabajar con uno u otro, dependiendo de la necesidad que tengamos.

Recuerda que para interiorizar mejor lo aprendido en este tutorial, necesitarás practicar: crea un proyecto, aplica lo aprendido y cuéntanos qué tal te fue. Hasta aquí llegamos el día de hoy. Si deseas aprender mucho más, puedes ingresar al Curso gratuito de HTML y CSS que tenemos en la plataforma. No olvides compartir el tutorial con tus amigos y déjanos tus dudas u opiniones en la caja de comentarios. Este fue kusillus, ¡Hasta la próxima!