En este tema, aprenderás sobre los selectores básicos de CSS, que son fundamentales para aplicar estilos a los elementos HTML. Los selectores te permiten seleccionar y manipular elementos específicos en tu documento HTML. Vamos a cubrir los siguientes selectores:
- Selector de Tipo
- Selector de Clase
- Selector de ID
- Selector Universal
- Selector de Atributo
- Selector de Descendiente
- Selector de Hijo
- Selector de Hermano Adyacente
- Selector de Hermano General
- Selector de Tipo
El selector de tipo selecciona todos los elementos de un tipo específico. Por ejemplo, para seleccionar todos los elementos <p> en un documento HTML, usarías el selector p.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Selector de Tipo</title>
<style>
p {
color: blue;
}
</style>
</head>
<body>
<p>Este es un párrafo.</p>
<p>Este es otro párrafo.</p>
</body>
</html>En este ejemplo, todos los elementos <p> tendrán el texto de color azul.
- Selector de Clase
El selector de clase selecciona todos los elementos que tienen un atributo class específico. Se utiliza un punto (.) seguido del nombre de la clase.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Selector de Clase</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<p class="highlight">Este párrafo está resaltado.</p>
<p>Este párrafo no está resaltado.</p>
</body>
</html>En este ejemplo, solo el párrafo con la clase highlight tendrá un fondo amarillo.
- Selector de ID
El selector de ID selecciona un elemento único con un atributo id específico. Se utiliza el símbolo de almohadilla (#) seguido del nombre del ID.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Selector de ID</title>
<style>
#main-heading {
font-size: 24px;
}
</style>
</head>
<body>
<h1 id="main-heading">Este es el encabezado principal.</h1>
<h1>Este es otro encabezado.</h1>
</body>
</html>En este ejemplo, solo el encabezado con el ID main-heading tendrá un tamaño de fuente de 24 píxeles.
- Selector Universal
El selector universal selecciona todos los elementos en el documento. Se representa con un asterisco (*).
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Selector Universal</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<p>Este es un párrafo.</p>
<h1>Este es un encabezado.</h1>
</body>
</html>En este ejemplo, todos los elementos tendrán un margen y un relleno de 0.
- Selector de Atributo
El selector de atributo selecciona elementos que tienen un atributo específico. Se representa con corchetes ([]).
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Selector de Atributo</title>
<style>
[type="text"] {
border: 2px solid red;
}
</style>
</head>
<body>
<input type="text" placeholder="Texto">
<input type="password" placeholder="Contraseña">
</body>
</html>En este ejemplo, solo el campo de entrada con el atributo type="text" tendrá un borde rojo.
- Selector de Descendiente
El selector de descendiente selecciona elementos que son descendientes de un elemento específico. Se representa con un espacio entre los selectores.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Selector de Descendiente</title>
<style>
div p {
color: green;
}
</style>
</head>
<body>
<div>
<p>Este párrafo está dentro de un div.</p>
</div>
<p>Este párrafo no está dentro de un div.</p>
</body>
</html>En este ejemplo, solo el párrafo dentro del <div> tendrá el texto de color verde.
- Selector de Hijo
El selector de hijo selecciona elementos que son hijos directos de un elemento específico. Se representa con el símbolo >.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Selector de Hijo</title>
<style>
ul > li {
color: purple;
}
</style>
</head>
<body>
<ul>
<li>Elemento de lista 1</li>
<li>Elemento de lista 2</li>
<ul>
<li>Elemento de lista anidada</li>
</ul>
</ul>
</body>
</html>En este ejemplo, solo los elementos de lista (<li>) que son hijos directos del <ul> tendrán el texto de color púrpura.
- Selector de Hermano Adyacente
El selector de hermano adyacente selecciona un elemento que es inmediatamente precedido por un elemento específico. Se representa con el símbolo +.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Selector de Hermano Adyacente</title>
<style>
h1 + p {
font-style: italic;
}
</style>
</head>
<body>
<h1>Encabezado</h1>
<p>Este párrafo sigue al encabezado.</p>
<p>Este párrafo no sigue inmediatamente al encabezado.</p>
</body>
</html>En este ejemplo, solo el párrafo que sigue inmediatamente al <h1> tendrá el texto en cursiva.
- Selector de Hermano General
El selector de hermano general selecciona todos los elementos que son hermanos de un elemento específico. Se representa con el símbolo ~.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Selector de Hermano General</title>
<style>
h1 ~ p {
color: orange;
}
</style>
</head>
<body>
<h1>Encabezado</h1>
<p>Este párrafo es un hermano del encabezado.</p>
<p>Este párrafo también es un hermano del encabezado.</p>
</body>
</html>En este ejemplo, todos los párrafos que son hermanos del <h1> tendrán el texto de color naranja.
Ejercicio Práctico
Ejercicio 1: Aplicando Selectores Básicos
Crea un documento HTML que contenga los siguientes elementos y aplica estilos usando los selectores básicos de CSS:
- Un encabezado
<h1>con el IDmain-titleque tenga un color de texto azul. - Un párrafo con la clase
introque tenga un fondo amarillo. - Una lista desordenada con tres elementos de lista, donde todos los elementos de lista tengan un margen izquierdo de 20px.
- Un campo de entrada con el atributo
type="email"que tenga un borde verde.
Solución
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejercicio de Selectores Básicos</title>
<style>
#main-title {
color: blue;
}
.intro {
background-color: yellow;
}
ul li {
margin-left: 20px;
}
[type="email"] {
border: 2px solid green;
}
</style>
</head>
<body>
<h1 id="main-title">Título Principal</h1>
<p class="intro">Este es un párrafo introductorio.</p>
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
<input type="email" placeholder="Correo electrónico">
</body>
</html>Conclusión
En esta lección, hemos cubierto los selectores básicos de CSS, que son esenciales para aplicar estilos a los elementos HTML. Comprender cómo funcionan estos selectores te permitirá tener un control preciso sobre el diseño y la presentación de tus páginas web. En la próxima lección, exploraremos cómo estilizar elementos HTML utilizando estos selectores y otros más avanzados.
Curso de HTML
Módulo 1: Introducción a HTML
- ¿Qué es HTML?
- Configurando tu Entorno
- Estructura Básica de HTML
- Etiquetas y Elementos HTML
- Creando tu Primera Página HTML
Módulo 2: Formateo de Texto en HTML
- Encabezados y Párrafos
- Etiquetas de Formateo de Texto
- Listas: Ordenadas y Desordenadas
- Citas en Bloque y Texto Preformateado
Módulo 3: Enlaces y Medios en HTML
Módulo 4: Tablas en HTML
- Estructura Básica de una Tabla
- Encabezados y Pies de Tabla
- Unión de Celdas: Colspan y Rowspan
- Estilizando Tablas
Módulo 5: Formularios en HTML
- Creando un Formulario Básico
- Elementos del Formulario: Input, Textarea y Select
- Atributos y Validación del Formulario
- Enviando Formularios
Módulo 6: Elementos Semánticos de HTML5
Módulo 7: Técnicas Avanzadas de HTML
Módulo 8: Integración de HTML y CSS
- Vinculando CSS a HTML
- CSS en Línea, Interno y Externo
- Selectores Básicos de CSS
- Estilizando Elementos HTML
Módulo 9: Diseño Web Responsivo
- Introducción al Diseño Responsivo
- Etiqueta Meta del Viewport
- Consultas de Medios
- Imágenes y Videos Responsivos
Módulo 10: Mejores Prácticas y Accesibilidad
- Mejores Prácticas de HTML
- Conceptos Básicos de Accesibilidad Web
- Usando Roles ARIA
- Pruebas de Accesibilidad