Selectores básicos
Selectores básicos
Ya me has oído hablar de las clases y las etiquetas, pero vamos a ver cómo funcionan en el contexto de CSS. También aprenderemos otros selectores como el de id, el de descendiente o el selector universal.
¿Qué son los selectores en CSS?
Los selectores en CSS son patrones que se utilizan para seleccionar y aplicar estilos a elementos específicos de un documento HTML. En otras palabras, los selectores determinan qué partes del HTML serán afectadas por una regla CSS.
Función de los selectores
La función principal de los selectores es:
- Identificar elementos específicos en el código HTML.
- Aplicar estilos definidos en las reglas CSS, como colores, tamaños, bordes, tipografía, etc.
Tipos principales de selectores y ejemplos
- Selector Universal (
*)- Selecciona todos los elementos de la página.
- Ejemplo:
* { margin: 0; padding: 0; }Se utiliza comúnmente para resetear márgenes y rellenos de todos los elementos.
- Selector de Elemento (o Tipo)
- Selecciona todos los elementos de un tipo específico.
- Ejemplo:
p { font-size: 16px; color: gray; }Aplica estos estilos a todos los párrafos<p>del documento.
- Selector de Clase (
.)- Selecciona elementos con una clase específica.
- Ejemplo:
.destacado { background-color: yellow; font-weight: bold; }Aplica estilos a todos los elementos que tienenclass="destacado".
- Selector de ID (
#)- Selecciona un único elemento con un identificador único.
- Ejemplo:
#header { background-color: blue; color: white; }Aplica estilos únicamente al elemento que tieneid="header".
- Selectores de Descendencia
- Selecciona elementos que son descendientes de otro elemento.
- Ejemplo:
div p { color: green; }Selecciona todos los párrafos<p>que estén dentro de un<div>.
- Selector de Hijos Directos (
>)- Selecciona elementos que son hijos directos de otro.
- Ejemplo:
ul > li { list-style-type: square; }Selecciona únicamente los<li>que son hijos directos de un<ul>.
- Selector de Grupo (
,)- Selecciona varios elementos y aplica el mismo estilo.
- Ejemplo:
h1, h2, h3 { font-family: Arial, sans-serif; }Aplica el mismo estilo a los encabezados<h1>,<h2>y<h3>.
- Selector de Atributo
- Selecciona elementos basados en un atributo o valor específico.
- Ejemplo:
input[type="text"] { border: 1px solid gray; }Selecciona todos los campos de entrada que tengan el atributotype="text".
- Selector Pseudo-clase
- Selecciona elementos en un estado específico.
- Ejemplo:
a:hover { color: red; }Cambia el color de los enlaces cuando el mouse pasa sobre ellos.
- Selector Pseudo-elemento
- Permite seleccionar y aplicar estilo a partes específicas de un elemento.
- Ejemplo:
p::first-line { font-weight: bold; }Aplica estilos a la primera línea de cada párrafo.
Ejemplo Completo
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de Selectores</title>
<style>
body {
font-family: Arial, sans-serif;
}
h1 {
color: blue;
}
.destacado {
background-color: yellow;
padding: 10px;
}
#footer {
text-align: center;
font-size: 12px;
color: gray;
}
p:hover {
color: red;
}
</style>
</head>
<body>
<h1>Hola Mundo</h1>
<p>Este es un párrafo normal.</p>
<p class="destacado">Este párrafo está destacado.</p>
<div id="footer">Este es el pie de página.</div>
</body>
</html>
Conclusión
Los selectores son la base para trabajar con CSS, ya que permiten aplicar estilos de manera específica o general según las necesidades. Usarlos correctamente es esencial para crear diseños eficientes y organizados.
Clases, IDs y Selectores en CSS
Para aplicar estilos de manera específica, usamos clases, IDs y otros selectores en CSS. Estos elementos nos permiten controlar cómo se presentan los elementos en nuestra página web.
Clases (.)
Las clases son ideales para aplicar estilos a múltiples elementos. Se definen con un punto (.) antes del nombre en el archivo CSS.
Ejemplo:
HTML:
<div class="contenedor">
<p class="texto-azul">Hola, soy un texto azul.</p>
<p class="texto-azul">Yo también soy azul.</p>
</div>
CSS:
.texto-azul {
color: blue;
font-size: 16px;
}
IDs (#)
Los IDs se usan para aplicar estilos únicos a un solo elemento. Se definen con un signo de numeral (#) antes del nombre en el archivo CSS.
Ejemplo:
HTML:
<p id="titulo-principal">Soy un título único.</p>
CSS:
#titulo-principal {
font-size: 24px;
color: green;
}
Selector Descendiente
Permite seleccionar elementos que son descendientes de otro elemento especificado.
Ejemplo:
HTML:
<div class="menu">
<ul>
<li>Inicio</li>
<li>Servicios</li>
<li>Contacto</li>
</ul>
</div>
CSS:
.menu ul li {
list-style-type: none;
color: red;
}
Selector Universal (*)
El selector universal aplica un estilo a todos los elementos de la página.
Ejemplo:
CSS:
* {
margin: 0;
padding: 0;
}
Este selector es útil para establecer valores predeterminados en todos los elementos.
Práctica con Selectores
- Define clases e IDs en tu archivo HTML.
- Aplica estilos específicos usando selectores descendientes y universales.
- Observa cómo los estilos afectan diferentes elementos de tu página.
Con esto, puedes personalizar aún más tu diseño y hacer que tu web luzca profesional.
