13/12/2019 Diferencias entre el selector Class y el selector Id

Adquire la Suscripción Anual por $99 dólares

DevCode Cursos
Ingresar

Comunidad  Planes Regístrate Gratis

Diferencias entre el selector

Class y el selector Id
Por Alexander Guevara Benites

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 de nición de ambos.

https://devcode.la/tutoriales/diferencias-class-id/ 1/6
13/12/2019 Diferencias entre el selector Class y el selector Id

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

EDIT ON
HTML CSS Result

<div id="unico">Charmander</div>

Resources

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 nalmente 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 identi cador de Id?, ¿las propiedades sí se aplican?

EDIT ON
HTML CSS Result

<!--Ejemplo-->
<div id="unico">Pikachu</div>
<div id="unico">Raichu</div>
<!--Esto no se debe de hacer-->

Resources

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 bene cioso 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:

https://devcode.la/tutoriales/diferencias-class-id/ 2/6
13/12/2019 Diferencias entre el selector Class y el selector Id

EDIT ON
HTML CSS Result

.pokemon {
background: #02B1FC;
margin: 1rem;
padding: 1rem;
text-align: center;
color: white;
font-size: 2rem;
Resources

Entonces si queremos aplicar las propiedades de un selector de clase a varios elementos,

podemos hacerlo de la siguiente manera:

EDIT ON
HTML CSS Result

.pkmn {
margin: 1rem;
padding: 1rem;
text-align: center;
font-size: 2rem;
}
.planta {
background: #1abc9c;
color: #16a085;
}
Resources

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
modi camos 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!

¿Te gustó el tutorial?

Ayúdanos a llegar a más personas

https://devcode.la/tutoriales/diferencias-class-id/ 3/6
13/12/2019 Diferencias entre el selector Class y el selector Id

Twittear Me gusta 259 Compartir

Alexander Guevara Benites

Nymeria's father | Designer 3D | Pokemon Master | Videogame Lover

 @kusillus

https://devcode.la/tutoriales/diferencias-class-id/ 4/6
13/12/2019 Diferencias entre el selector Class y el selector Id

3 Comentarios DevCode 
1 Iniciar sesión

 Recomendar 31 t Tweet f Compartir ordenar por el mejor

Únete a la discusión...

INICIAR SESIÓN CON

O REGISTRARSE CON DISQUS ?

Nombre

exequiel ruiz • hace un mes

Más claro imposible.
Muchas gracias.
△ ▽ • Responder • Compartir ›

Piero Lermo • hace 2 meses

Excelente ¡¡¡¡

△ ▽ • Responder • Compartir ›

Hugh Norris • hace 3 meses

Excelente explicación! Súper util, y me encantó que fuera con Pokemon jajajaj. Muchas
gracias
△ ▽ • Responder • Compartir ›

✉ Suscribirse d Agrega Disqus a tu sitioAgregar DisqusAgregar

SIGUENOS EN YOUTUBE

YouTube 49 k

SIGUENOS EN FACEBOOK
Me gusta 100 mil Compartir

https://devcode.la/tutoriales/diferencias-class-id/ 5/6
13/12/2019 Diferencias entre el selector Class y el selector Id

SIGUENOS EN TWITTER
Seguir a @devcodela 14,9 mil seguidores

ÚLTIMOS TUTORIALES
Cómo enlazar
phpMyAdmin con MYSQL
Workbench
25/09/2019

Búsqueda Binaria en C++

27/09/2019

Caché de lado del servidor

con Express en NodeJS
27/11/2017

CURSOS
RELACIONADOS
Curso de HTML y CSS
Gratis
GRATUITO

Curso de CSS3
PREMIUM

https://devcode.la/tutoriales/diferencias-class-id/ 6/6