Tipos de selectores
Tipos de selectores
Tipos de selectores 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.
Introducción
Hola:
En esta lección, ampliaremos nuestros conocimientos de CSS con selectores más complejos.
Definición de varios estilos
Podemos crear varias definiciones de estilo colocando puntos y coma entre cada estilo.
.first{
color:blue;
font-size:20px;
text-align: center;
}hay un documento HTML cada vez más complejo
Hasta ahora, hemos trabajado con selectores simples de etiqueta, id y clase. Sin embargo, en algunos casos, cuando la interfaz de usuario se vuelve más compleja, necesitaremos usar selectores más complejos.
En el ejemplo siguiente, hay un documento HTML cada vez más complejo.
<body>
<div id="my-area">
<p class="first">lorem</p>
<div class="second">
<p class="third">Ipsum</p>
</div>
</div>
</body>Analizar el ejemplo
Analicemos ahora nuestro código.
- Hay un div con el id my-area que actúa como contenedor dentro del cuerpo de la página. Es el ancestro de todos los elementos que se encuentran dentro de este div.
- El elemento p con la clase first es hermano del elemento div con la segunda clase.
- El tercer elemento es el hijo del segundo elemento y del elemento my-area; este último puede considerarse el ancestro del tercer elemento.
Advertencia
Puede pensar en la estructura HTML como un árbol genealógico literal.
Puede heredar genéticamente de su abuelo.
Pero si esta herencia cambia en su padre, el gen del padre será más dominante y el rasgo heredado del abuelo cambiará.
Combinaciones de selectores
Ahora veamos cómo crear combinaciones de selectores.
La siguiente instrucción indica que el elemento con la segunda clase es un descendiente (hijo o nieto) del elemento con la tercera clase.
Si hay un espacio entre las dos clases, significa que la clase de la izquierda busca un descendiente.
.second .third{
color:red;
}Selector de hijo
En el ejemplo siguiente:
Significa seleccionar la tercera clase, que es hija de la segunda clase.
El signo mayor que significa seleccionar el hijo del elemento correspondiente.
.second > .third{
color:red;
}podemos combinar un selector de etiqueta y uno de clase para seleccionar un elemento.
Al mismo tiempo, podemos combinar un selector de etiqueta y uno de clase para seleccionar un elemento.
El ejemplo siguiente seleccionará los elementos p que tengan la tercera clase.
<style>
p.third{
color:red;
}
</style>
<p class="third">Hello CSS</p>Supongamos que queremos seleccionar un div con la primera clase.
Supongamos que queremos seleccionar un div con la primera clase.
En el ejemplo siguiente, significa seleccionar el elemento con la primera clase que es hijo del elemento div con el id my-area.
Esto aumenta la especificidad del elemento que se va a seleccionar.
div#my-area > .first{
color:red;
}Seleccionar todos
El asterisco (*) es importante entre los selectores.
Significa seleccionar todos los elementos.
En el ejemplo siguiente, el selector indica que el elemento con el id my-area debe seleccionar todos sus descendientes.
Lo importante aquí es que no se seleccionan únicamente los hijos, sino todos los descendientes.
Si quisiéramos seleccionar solo los hijos, tendríamos que colocar el signo mayor que delante del asterisco.
/* It chooses all the descendants of #my-area. */
#my-area *{
color:red;
}
/* It chooses all the children of #my-area. */
#my-area > *{
color:red;
}Selector de hermanos adyacentes
Ya hemos usado el selector de descendientes y el selector de hijos; ahora aprenderemos sobre el selector de hermanos.
El selector de hermanos usa el signo + para seleccionar el hermano siguiente.
En nuestro ejemplo, el selector cambiará a amarillo el color de fondo del tercer elemento de párrafo.
<!DOCTYPE html>
<html>
<head>
<style>
div + p {
background-color: yellow;
}
</style>
</head>
<body>
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
</div>
<p>Paragraph 3. Not in a div.</p>
<p>Paragraph 4. Not in a div.</p>
</body>
</html>Selector general de hermanos
Si queremos seleccionar no solo el primer hermano siguiente, sino todos los hermanos posteriores, usamos el signo de tilde (~).
El símbolo de tilde también se conoce como combinador de hermanos posteriores.
<style>
div ~ p {
background-color: red;
}
</style>
<p>Paragraph 1.</p>
<div>
<p>Paragraph 2.</p>
</div>
<span>span element.</span>
<p>Paragraph 3.</p>
<p>Paragraph 4</p>
Pseudoclases y clases CSS
Las expresiones que no son una clase, pero se comportan como tal, se denominan pseudoclases.
No definimos pseudoclases para ningún elemento de HTML.
Cuando el navegador interpreta el código, da por hecho que existen. Por lo tanto, podemos usar pseudoclases en los selectores CSS.
La pseudoclase :hover
Entre las pseudoclases, :hover es, sin duda, la más conocida.
Hover (:hover) es una pseudoclase que el navegador define automáticamente para el elemento correspondiente cuando el puntero del ratón pasa sobre él.
Las pseudoclases se usan después del símbolo de dos puntos (:) en la declaración del selector.
A continuación se muestra un ejemplo de la sintaxis para usar una pseudoclase.
selector:pseudo-class {
property: value;
}Aplicar estilos a enlaces con :hover
Ahora creemos un enlace y veamos qué aspecto tendrá al pasar el puntero sobre él.
Advertencia: Como en los dispositivos móviles no existe un evento hover como en la Web, este efecto no se verá en las aplicaciones móviles de Coddykit.
En el ejemplo siguiente, observemos que, al pasar el ratón sobre el enlace, su color cambiará a verde.
<!DOCTYPE html>
<html>
<head>
<style>
.my-link{
color:red;
}
.my-link:hover{
color:green;
}
</style>
</head>
<body>
<a class="my-link" href="https://www.coddykit.com">
CoddyKit Homepage Link
</a>
</body>
</html>Pseudoclase :first-child
Una de las pseudoclases más confusas es :first-child.
Normalmente, por su nombre, podemos deducir que sirve para seleccionar el primer hijo de un elemento.
En realidad, esta deducción no es correcta.
Se usa para seleccionar el primer elemento entre los hermanos del elemento.
<!DOCTYPE html>
<html>
<head>
<style>
/* Chooses the first p element
among children of the my-box class. */
.my-box p:first-child {
font-size: 24px;
}
</style>
</head>
<body>
<div class="my-box">
<p>This is first text.</p>
<p>This is second text.</p>
<p>This is third text.</p>
</div>
</body>
</html>Pseudoclase :last-child
last-child es lo opuesto de la pseudoclase first-child. Se usa para seleccionar el último elemento entre los hermanos del elemento.
<!DOCTYPE html>
<html>
<head>
<style>
/* Chooses the last p element
among children of the my-box class. */
.my-box p:last-child {
font-size: 24px;
}
</style>
</head>
<body>
<div class="my-box">
<p>This is first text.</p>
<p>This is second text.</p>
<p>This is third text.</p>
</div>
</body>
</html>Pseudoelemento ::before
Si queremos añadir algo antes de un elemento, se usa el pseudoselector ::before.
En el ejemplo siguiente, añadimos el contenido 'Hello' antes de los elementos de encabezado.
<!DOCTYPE html>
<html>
<head>
<style>
h1::before {
content: "Hello ";
}
</style>
</head>
<body>
<h1>Coddykit</h1>
<h1>Coddykit</h1>
<h1>Coddykit</h1>
</body>
</html>Pseudoelemento ::after
El pseudoelemento ::after, que es lo contrario del pseudoelemento ::before, se usa para añadir contenido nuevo después del elemento.
<!DOCTYPE html>
<html>
<head>
<style>
h1::after {
content: " Coddykit";
}
</style>
</head>
<body>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
</body>
</html>Pseudoclase de lista
Hemos aprendido las pseudoclases más utilizadas. Sin embargo, existen muchas más.
Puede consultar la lista de todas las pseudoclases en el enlace siguiente. Puede utilizar cualquiera de ellas cuando las necesite.
Enhorabuena
Enhorabuena 🎉
En esta sección, hemos aprendido los tipos de selectores.
En la siguiente sección, aprenderemos las propiedades de CSS más utilizadas
Preguntas frecuentes
¿La lección «Tipos de selectores» es gratis?
Sí — el texto completo de «Tipos de selectores» 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 «Tipos de selectores»?
Tipos de selectores 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 «Tipos de selectores»?
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.