Introducción
Los selectores CSS son importantes al momento de aplicar estilos en un proyecto web, por mas que domines el modelo de caja, las propiedades de position, flex y grid; sino dominas los selectores no podrás aplicar estilos a la estructura html de quieras.
Este post es la continuación de otro similar donde resolvemos 5 ejercicios sobre selectores, puedes leerlo acá:
Ahora vamos a nuestra practica.
Tenemos la siguiente plantilla HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Plantilla Compleja</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="main-header">
<h1 id="site-title">Mi Sitio Web</h1>
<nav class="main-nav">
<ul>
<li><a href="#" class="nav-link active">Inicio</a></li>
<li><a href="#" class="nav-link">Servicios</a></li>
<li><a href="#" class="nav-link">Portafolio</a></li>
<li><a href="#" class="nav-link">Contacto</a></li>
</ul>
</nav>
</header>
<main>
<section class="content-section">
<h2 class="section-title">Artículos Recientes</h2>
<article class="article-item">
<h3 class="article-title">Artículo 1</h3>
<p class="article-content">Este es el contenido del primer artículo.</p>
<a href="#" class="read-more">Leer más</a>
</article>
<article class="article-item featured">
<h3 class="article-title">Artículo 2</h3>
<p class="article-content">Este es el contenido del segundo artículo.</p>
<a href="#" class="read-more">Leer más</a>
</article>
<article class="article-item">
<h3 class="article-title">Artículo 3</h3>
<p class="article-content">Este es el contenido del tercer artículo.</p>
<a href="#" class="read-more">Leer más</a>
</article>
</section>
<aside class="sidebar">
<div class="widget">
<h4 class="widget-title">Widget 1</h4>
<p class="widget-content">Contenido del widget 1.</p>
</div>
<div class="widget">
<h4 class="widget-title">Widget 2</h4>
<p class="widget-content">Contenido del widget 2.</p>
</div>
</aside>
</main>
<footer class="main-footer">
<p class="footer-text">© 2023 Mi Sitio Web</p>
<ul class="footer-links">
<li><a href="#" class="footer-link">Política de Privacidad</a></li>
<li><a href="#" class="footer-link">Términos de Servicio</a></li>
</ul>
</footer>
</body>
</html>
Preguntas
Y las siguientes 10 preguntas sobre selectores CSS:
Selector de Atributo: ¿Cómo seleccionarías todos los enlaces (
<a>) que tienen la clasenav-linky están dentro de un elemento<nav>con la clasemain-nav?Selector de Pseudo-clase: ¿Cómo aplicarías un estilo diferente al enlace que tiene la clase
activedentro de la lista de navegación?Selector de Descendencia: ¿Cómo seleccionarías todos los elementos
<p>que están dentro de un<article>con la clasearticle-item?Selector de Hijo Directo: ¿Cómo seleccionarías solo los elementos
<li>que son hijos directos de un<ul>dentro delfooter?Selector de Hermano Adyacente: ¿Cómo seleccionarías el primer
<article>que sigue inmediatamente a un<h2>con la clasesection-title?Selector de Pseudo-elemento: ¿Cómo agregarías un símbolo de flecha (
→) después de cada enlace con la claseread-more?Selector de Atributo con Valor Específico: ¿Cómo seleccionarías todos los elementos
<a>que tienen un atributohrefque comienza con#?Selector de Negación: ¿Cómo seleccionarías todos los elementos
<article>que no tienen la clasefeatured?Selector de Pseudo-clase de Posición: ¿Cómo seleccionarías el tercer
<article>dentro de la sección de artículos?Selector de Atributo que Contiene una Palabra: ¿Cómo seleccionarías todos los elementos
<h4>que tienen una clase que contiene la palabratitle?
Respuestas
En esta ocasión te presento las respuestas en un CodePen:
Conclusión
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.
Otros post de mi autoría que te pueden interesar:
Top comments (0)