Sfida di ripasso
Fa parte della sezione Padronanza di CSS del percorso HTML di Coddy. Lezione 6 di 43.
Sfida
FacileHai imparato a combinare i selettori CSS usando i combinatori di discendenza, figlio, fratello adiacente e fratello generale. Ora è il momento di mettere tutto in pratica!
- Assegna il colore blu turchese (
#40e0d0) a tutti gli elementi<p>che sono figli diretti all'interno del<div>con la classe.rooms. - Assegna il colore verde schiuma di mare (
#2e8b57) a tutti gli elementi<p>che sono discendenti del<div>con la classe.facilities. - Assegna il colore beige sabbia (
#f4a300) a ogni elemento<p>che viene dopo un<div>.
Provalo tu
<!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>Tutte le lezioni di Padronanza di CSS
1Padronanza dei selettori – Combinazioni
IntroduzioneSelettore discendenteSelettore figlioSelettore fratello adiacenteSelettore fratello generaleSfida di ripasso2Pseudo-classi interattive
Pseudo-classiEffetti al passaggio del mouseEffetti di focusStili attiviSfida di riepilogo3Classi pseudo-strutturali
Classi pseudo-strutturaliSelezionare il primo figlioSelezionare l'ultimo figlioIl potere degli schemi: usare nth-childSfida di riepilogoEsercitati da solo: Playground Web