Desafío de repaso
Parte de la sección CSS Mastery del Journey de HTML de Coddy — lección 6 de 43.
Desafío
FácilHas aprendido a combinar selectores CSS utilizando los combinadores de descendiente, hijo, hermano adyacente y hermano general. ¡Ahora es el momento de poner todo en práctica!
- Establece el estilo de todos los elementos
<p>que sean hijos directos dentro del<div>con la clase.roomsusando azul turquesa (#40e0d0). - Establece el estilo de todos los elementos
<p>que sean descendientes del<div>con la clase.facilitiesusando verde espuma de mar (#2e8b57). - Establece el estilo de cada elemento
<p>que aparezca después de un<div>con beige arena (#f4a300).
Pruébalo tú mismo
<!DOCTYPE html>
<html>
<head>
<title>Recap Challenge</title>
<style>
/* Your CSS solution here */
</style>
</head>
<body>
<section>
<h1>Welcome to Paradise Resort</h1>
<div class="rooms">
<h2>Ocean View Rooms</h2>
<p>Room 101</p>
<p>Room 102</p>
</div>
<div class="facilities">
<h2>Resort Facilities</h2>
<div>
<p>Infinity Pool</p>
<p>Spa & Wellness Center</p>
</div>
<p>Beach Access</p>
</div>
<p>Beachfront Restaurant</p>
<p>Sunset Bar</p>
</section>
</body>
</html>Todas las lecciones de CSS Mastery
1Dominio de selectores – Combinación
IntroducciónSelector de descendienteSelector de hijoSelector de hermano adyacenteSelector de hermano generalDesafío de repaso2Pseudoclases interactivas
PseudoclasesEfectos de hoverEfectos de focusEstilos de estado activoDesafío de repaso3Pseudoclases estructurales
Pseudoclases estructuralesSeleccionando el primer hijoSeleccionando el último hijoEl poder de los patrones: Usando nth-childDesafío de repaso