Défi récapitulatif
Fait partie de la section CSS Mastery du Journey HTML de Coddy — leçon 16 sur 43.
Défi
FacileStylez une page de galerie en utilisant des pseudo-classes structurelles. Votre défi consiste à :
- Stylez la première image de la galerie avec une bordure
3px solid rgb(0, 0, 255). - Donnez à la dernière image de la galerie une légende spéciale avec un texte rouge.
- Utilisez
:nth-childpour donner à chaque conteneur d'image de numéro impair un arrière-plan gris (rgba(153, 153, 153, 1)).
Essayez vous-même
<!DOCTYPE html>
<html>
<head>
<title>Photo Gallery</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.gallery {
display: flex;
flex-wrap: wrap;
gap: 15px;
justify-content: center;
}
.image-container {
width: 200px;
padding: 10px;
box-shadow: 0 0 5px rgba(0,0,0,0.2);
text-align: center;
}
img {
max-width: 100%;
height: auto;
}
.caption {
margin-top: 8px;
font-size: 14px;
}
/* Write your CSS rules here */
</style>
</head>
<body>
<h1>My Photo Gallery</h1>
<div class="gallery">
<div class="image-container">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/45/Sunrise_at_Newell_Beach%2C_2004.jpg" alt="Image 1">
<p class="caption">Sunrise at the beach</p>
</div>
<div class="image-container">
<img src="https://upload.wikimedia.org/wikipedia/commons/d/db/Mt_Herschel%2C_Antarctica%2C_Jan_2006.jpg" alt="Image 2">
<p class="caption">Mountain landscape</p>
</div>
<div class="image-container">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/80/NYC_wideangle_south_from_Top_of_the_Rock.jpg" alt="Image 3">
<p class="caption">City skyline</p>
</div>
<div class="image-container">
<img src="https://upload.wikimedia.org/wikipedia/commons/3/3d/D%C3%BClmen%2C_Rorup%2C_NSG_Roruper_Holz_--_2021_--_8187-91.jpg" alt="Image 4">
<p class="caption">Forest trail</p>
</div>
<div class="image-container">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/87/Mesquite_Sand_Dunes_in_Death_Valley.jpg" alt="Image 5">
<p class="caption">Desert sunset</p>
</div>
<div class="image-container">
<img src="https://upload.wikimedia.org/wikipedia/commons/d/de/Pressure_ridge_at_Cape_Columbia.jpg" alt="Image 6">
<p class="caption">Arctic wilderness</p>
</div>
</div>
</body>
</html>Toutes les leçons de CSS Mastery
1Maîtrise des sélecteurs – Combinaisons
IntroductionSélecteur de descendantSélecteur d'enfantSélecteur de frère adjacentSélecteur de frère généralDéfi récapitulatif7Construire avec CSS Grid
Les bases de GridPlacement d'éléments Grid-rowZones nomméesDéfi récapitulatif2Pseudo-classes interactives
Pseudo-classesEffets de survolEffets de focusStyles actifsDéfi récapitulatif3Pseudo-classes structurelles
Pseudo-classes structurellesCibler le premier enfantCibler le dernier enfantLa puissance des motifs : utiliser nth-childDéfi récapitulatif