Introducción
Los selectores CSS son vitales y los conceptos mas importantes que necesitamos aprender y dominar.
Un selector puede ser de la más básico como un selector de tipo o d clase, hasta tan complejo como selectores combinados con pseudoclases, etc.
En este breve post te propongo un index.html de ejemplo y 5 preguntas de selectores basados en dicho archivo para mejorar nuestros conocimientos de selectores en CSS.
Empecemos 😃
Practica
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Página Compleja</title>
</head>
<body>
<header id="main-header" class="header">
<h1 class="title">Título de la Página</h1>
<nav class="navbar">
<ul class="menu">
<li><a href="#home" class="active">Inicio</a></li>
<li><a href="#about">Acerca de</a></li>
<li><a href="#services">Servicios</a></li>
<li><a href="#contact">Contacto</a></li>
</ul>
</nav>
</header>
<section id="hero" class="hero-section">
<div class="hero-content">
<h2>Bienvenido a nuestra página</h2>
<p class="description">Este es un ejemplo de una página compleja para practicar selectores CSS.</p>
<button class="cta-button">¡Haz clic aquí!</button>
</div>
</section>
<main>
<article id="post-1" class="blog-post">
<h3>Artículo 1</h3>
<p class="post-content">Este es el contenido del primer artículo.</p>
<a href="#read-more" class="read-more">Leer más</a>
</article>
<article id="post-2" class="blog-post featured">
<h3>Artículo 2</h3>
<p class="post-content">Este es el contenido del segundo artículo.</p>
<a href="#read-more" class="read-more">Leer más</a>
</article>
<article id="post-3" class="blog-post">
<h3>Artículo 3</h3>
<p class="post-content">Este es el contenido del tercer artículo.</p>
<a href="#read-more" class="read-more">Leer más</a>
</article>
</main>
<aside class="sidebar">
<h4>Categorías</h4>
<ul class="categories">
<li><a href="#category-1">Categoría 1</a></li>
<li><a href="#category-2">Categoría 2</a></li>
<li><a href="#category-3">Categoría 3</a></li>
</ul>
</aside>
<footer id="main-footer" class="footer">
<p>© 2023 Todos los derechos reservados.</p>
</footer>
<form id="contact-form" class="form">
<label for="name">Nombre:</label>
<input type="text" id="name" name="name" placeholder="Tu nombre">
<label for="email">Correo electrónico:</label>
<input type="email" id="email" name="email" placeholder="Tu correo">
<label for="message">Mensaje:</label>
<textarea id="message" name="message" rows="5" placeholder="Escribe tu mensaje"></textarea>
<button type="submit" class="submit-button">Enviar</button>
</form>
</body>
</html>
Intenta responder las siguientes preguntas en tu propio editor de código. No esta permitido modificar el HTML, trabaja directamente escribiendo los selectores correspondientes.
¿Cómo seleccionarías el primer
<article>dentro del<main>que tenga la claseblog-post, pero solo si no tiene la clasefeatured?¿Qué selector usarías para aplicar estilos únicamente al último elemento
<li>dentro de la lista de categorías (<ul class="categories">) que esté dentro del<aside>?¿Cómo seleccionarías todos los elementos
<p>que sean hijos directos de un<article>con la claseblog-post, pero solo si ese<article>es el tercer hijo de su contenedor padre?¿Qué selector usarías para aplicar estilos al botón de envío (
<button class="submit-button">) solo cuando el formulario (<form>) tenga el atributoidigual a"contact-form"y el botón esté siendo presionado (pseudo-clase:active)?¿Cómo seleccionarías el primer carácter de cada párrafo (
<p>) dentro del<main>para aplicarle un estilo especial (por ejemplo, cambiar su color o tamaño)?
Respuestas
- ¿Cómo seleccionarías el primer
<article>dentro del<main>que tenga la claseblog-post, pero solo si no tiene la clasefeatured?
main .blog-post:not(.featured):first-of-type{
border: 1px solid;
}
La pseudoclase :not es útil para ignorar selectores (ideal para este ejercicio) y la pseudoclase :first-of-type selecciona el primer tipo de etiqueta que necesitamos.
- ¿Qué selector usarías para aplicar estilos únicamente al último elemento
<li>dentro de la lista de categorías (<ul class="categories">) que esté dentro del<aside>?
.sidebar ul.categories li:last-child{
background-color: red;
}
La pseudoclase :last-child nos sirve para seleccionar el último li de nuestra lista de ul.
- ¿Cómo seleccionarías todos los elementos
<p>que sean hijos directos de un<article>con la claseblog-post, pero solo si ese<article>es el tercer hijo de su contenedor padre?
main article.blog-post:nth-child(3) > p{
border: 1px solid yellow;
}
La pseudoclase nth-child(n) nos permite seleccionar un item en concreto que nosotros le indicamos.
- ¿Qué selector usarías para aplicar estilos al botón de envío (
<button class="submit-button">) solo cuando el formulario (<form>) tenga el atributoidigual a"contact-form"y el botón esté siendo presionado (pseudo-clase:active)?
#contact-form button.submit-button:active {
background-color: red;
}
La psudoclase active solo nos sirve para hacer un cambio de esta de un elemento.
- ¿Cómo seleccionarías el primer carácter de cada párrafo (
<p>) dentro del<main>para aplicarle un estilo especial (por ejemplo, cambiar su color o tamaño)?
main .blog-post > p::first-letter {
font-size: 2rem;
}
El selector combinado > selecciona todos los hijos directos de .blog-post y con el pseudoelemento p::first-letter seleccionamos la primera letra de cada párrafo.
Conclusiones
Los selectores CSS pueden ser simples o complejos según nuestras necesidades, es importante dominar este tipo de selectores para poder avanzar en nuestros conocimientos sobre CSS.
Top comments (0)