Teoría
Teoría

Selectores descendientes

Si conviene usar menos selectores de etiqueta y más de clase, ¿tendremos que ponerle una clase a cada elemento del HTML? No, eso complicaría el código sin necesidad.

¿Para qué usamos clases? Para limitar los elementos a los que se aplica una regla CSS: solo a los que tengan la clase indicada. Pero hay otras formas de delimitar el alcance de los estilos. Mira esta lista dentro de la navegación:

<nav class="blog-navigation">
  <ul>…</ul>
</nav>

¿Cómo aplicamos estilos solo a esa lista? Una opción es agregarle una clase y usar su selector. Otra es usar un selector que busque las listas dentro del bloque con la clase blog-navigation.

Puedes combinar distintos tipos de selectores separándolos con espacios. Estas combinaciones se llaman selectores descendientes o contextuales y se leen de derecha a izquierda. Por ejemplo:

nav a {…}        /* elementos a dentro de elementos nav */
.menu ul {…}     /* elementos ul dentro de elementos con la clase menu */
.post .title {…} /* elementos con la clase title dentro de elementos con la clase post */

¿Reconoces el selector nav a del segundo ejercicio? Nos permitió poner en blanco solo los enlaces de la navegación; los del resto del texto siguieron azules.

Puedes combinar tantos selectores como quieras, aunque conviene limitarse a dos o, como máximo, tres niveles. Los selectores descendientes nos ahorran inventar nombres de clase y llenar el HTML con ellos.

Cambiemos un par de selectores del blog y mejoremos el aspecto del encabezado y de los elementos de la lista de navegación, ahora con los selectores adecuados.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Sitio de un principiante en HTML y CSS</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>Sitio de un principiante en HTML y CSS</h1> </header> <main> <img class="avatar" src="img/raccoon.svg" width="80" height="80" alt="Avatar"> <nav class="blog-navigation"> <h2>Entradas del blog</h2> <ul> <li><a href="day-1.html">Día 1. Cómo olvidé darle de comer al gato</a></li> <li><a href="day-2.html">Día 2. Quiero dedicarme a HTML y CSS</a></li> <li><a href="day-3.html">Día 3. Mi gato está enojado conmigo</a></li> <li><a href="day-4.html">Día 4. Casi me enfermo</a></li> <li><a href="day-5.html">Día 5. Un descanso</a></li> <li><a href="day-6.html">Día 6. No entendí nada</a></li> <li><a href="day-7.html">Día 7. Cupcake me encargó una tarea</a></li> <li><a href="day-8.html">Día 8. Un día muy serio</a></li> <li><a href="day-9.html">Día 9. O mejor dicho, noche</a></li> <li><a href="day-10.html">Día 10. Un primer balance</a></li> <li><a href="day-11.html">Día 11. Sin exagerar</a></li> <li><a href="day-12.html">Día 12. A todos les gustan las galletas</a></li> <li><a href="day-13.html">Día 13. Encontré un artículo</a></li> <li><a href="day-14.html">Día 14. Un formato nuevo</a></li> <li><a href="day-15.html">Día 15. Una galería de selfis</a></li> </ul> </nav> <section> <p>¡Hola a todos! Les doy la bienvenida a mi primer sitio web. Hace poco no tenía ni idea de cómo se crean las páginas web, pero ahora encontré <a href="https://htmlacademy.org/courses">cursos interactivos de HTML y CSS</a> y me propuse aprender a crearlas. Hasta tengo un instructor: Cupcake, que no me dejará bajar el ritmo y estará atento a mis avances.</p> <p>Mi primera tarea es llevar un diario y contar con sinceridad todos mis logros.</p> </section> <section> Sección de habilidades </section> </main> <footer> Pie de página </footer> </body> </html>

CSS

body { padding: 0 30px; font-size: 16px; line-height: 26px; font-family: "Arial", sans-serif; color: #222222; background: #ffffff url("img/bg-page.png") no-repeat top center; } h1 { font-size: 36px; line-height: normal; } h2 { font-size: 20px; line-height: normal; } a { color: #0099ef; text-decoration: underline; } .avatar { border-radius: 50%; } .blog-navigation { margin-bottom: 30px; padding: 20px; background-color: #4470c4; border: 5px solid #2d508f; color: #ffffff; } /* Sustituye el selector de abajo */ nav a { color: #ffffff; } /* Sustituye el selector de abajo */ ul { list-style: none; padding-left: 0; } /* Descomenta la regla de abajo */ /* .blog-navigation h2 { margin-top: 0; } */ /* Descomenta la regla de abajo */ /* .blog-navigation li { margin-bottom: 5px; } */ footer { margin-top: 30px; }

ObjetivosRealizado

Sustituye el selector nav a por el selector descendiente .blog-navigation a.
Después, sustituye el selector ul por .blog-navigation ul.
En el editor CSS, descomenta la regla .blog-navigation h2.
Después, descomenta la regla para .blog-navigation li.