Selector de clase
Selector de clase
Selector de clase es una lección gratuita de HTML for Kids en CoddyKit. Esta es la lección 1 de 1. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML for Kids, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML for Kids incluye 1 lecciones en total.
Por qué utilizar selectores de clase
Hola:
Hemos llegado a los selectores de clase, uno de los temas más importantes de CSS.
Conocemos el selector de clase porque lo hemos utilizado con frecuencia hasta ahora.
En esta lección, consolidaremos nuestros conocimientos y aprenderemos sus ventajas frente a otros selectores.
Sintaxis del selector de clase
Comencemos.
Usamos el selector de punto (.) para definir un selector de tipo clase. A continuación, se muestra un selector de clase llamado my-class al que se le ha asignado el estilo font-size: 10px.
.my-class {
font-size: 10px;
}
También podemos definir más de un estilo para un selector de clase.
.my-class {
font-size: 10px;
}
Selector múltiple
Podemos asignar más de una clase al mismo elemento.
En el ejemplo siguiente, se definen dos selectores de clase llamados el1 y el2.
Se pueden añadir dos o más clases al atributo class del elemento creado con la etiqueta p, separándolas con un espacio.
En la sección de vista previa, puede ver que los estilos de las dos clases se reflejan en el elemento al mismo tiempo.
<style>
.el1{
color:red;
}
.el2{
font-size:30px;
}
</style>
<p class="el1 el2">
Hello Class Selector
</p>Entonces, ¿por qué deberíamos elegir el selector de clase en lugar del selector de etiqueta y del selector de id?
Entonces, ¿por qué deberíamos elegir el selector de clase en lugar del selector de etiqueta y del selector de id?
Cuando usamos el selector de etiqueta, pueden producirse resultados no deseados porque afecta a todos los elementos creados con esa etiqueta. Por lo tanto, normalmente usamos estas etiquetas cuando todos los elementos deben tener una característica en común.
Por ejemplo, si queremos que la familia tipográfica de cada elemento sea 'Lato' , creamos una definición de la siguiente manera.
a{
font-family: Lato,sans-serif
}Entonces, ¿por qué deberíamos elegir el selector de clase en lugar del selector de etiqueta y del selector de id? 2
Podríamos crear una definición específica para un elemento con el selector de id.
Sin embargo, como todas nuestras definiciones de estilo solo son válidas para un elemento, tuvimos que volver a escribir el código para cualquier otro elemento en el que quisiéramos mostrar las mismas propiedades.
Esto se debe a que en un documento HTML solo puede haber un elemento con el mismo id.
Especificidad de CSS
Ahora aprenderemos el concepto de especificidad de CSS.
Volvamos a plantear un problema para comprender mejor el tema y aprenderemos este concepto mientras lo resolvemos.
Especificidad de CSS 2
En el ejemplo siguiente,
Se ha creado una definición de estilo para la etiqueta p.
Se ha creado una definición de estilo con un selector de clase llamado .first.
Ambos selectores seleccionan el mismo elemento de nuestro documento HTML.
Ambos selectores han definido estilos que reemplazan la misma propiedad de color. En este caso, habrá un conflicto.
<style>
.first{
color:blue;
}
p{
color:red;
}
</style>
<p class="first">
Enroll Now And Start Learn Codding?
</p>
Especificidad de CSS 3
Al observar el ejemplo, podríamos pensar que el color será rojo basándonos en nuestros conocimientos previos.
Esto se debe a que el concepto de cascada nos indica que prevalecerá la última posición en el orden del código.
Sin embargo, hay un pequeño matiz. Si tienen la misma especificidad, prevalece el último código añadido.
La especificidad es una evaluación que muestra la importancia del selector en el elemento o los elementos correspondientes.
Independientemente de su posición en el código, el navegador evaluará el selector que tenga un nivel de especificidad más alto.
Advertencia
El selector de clase es una definición más específica que el selector de elemento. Por lo tanto, tiene un nivel de especificidad más alto.
Especificidad de los selectores
Determinar qué selector es más específico es bastante sencillo.
Como a un elemento solo se le puede asignar 1 ID y solo puede haber 1 en la página web, esperamos que sea el selector con mayor prioridad.
Los selectores de clase, por otro lado, pueden evaluarse como más específicos que los selectores de etiqueta porque seleccionan un grupo más específico que la etiqueta.
En el ejemplo siguiente veremos que el selector de id prevalece al seleccionar el mismo elemento con 3 selectores diferentes.
<style>
#first{
color:green;
}
.first{
color:blue;
}
p{
color:red;
}
</style>
<p class="first" id="first">
Enroll Now And Start Learn Codding?
</p>Herramienta calculadora de especificidad
Puede acceder a la calculadora de especificidad en línea desde este enlace.
Cuándo importa la especificidad
Entonces, ¿tengo que usar estos cálculos todo el tiempo?
Por supuesto que no. No habrá conflictos si escribimos el código de acuerdo con los estándares.
Por lo tanto, no tiene que hacer cálculos matemáticos continuamente, pero cuando surja un problema, es posible que necesite esta información para resolverlo.
Enhorabuena
Enhorabuena. 🥳🥳🥳
Ha terminado la lección Selector de clase y especificidad de CSS.
En la siguiente sección, aprenderemos los tipos de selectores.
Puede hacer clic para continuar en la siguiente sección.
Preguntas frecuentes
¿La lección «Selector de clase» es gratis?
Sí — el texto completo de «Selector de clase» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML for Kids, actualiza a CoddyKit PRO. El curso de HTML for Kids incluye 1 lecciones en total.
¿Qué aprenderé en «Selector de clase»?
Selector de clase Practicas HTML for Kids con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar HTML for Kids?
No se requiere experiencia previa. HTML for Kids en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 1.
¿Cuánto tiempo toma la lección «Selector de clase»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de HTML for Kids?
Sí. Cada lección de HTML for Kids incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.