Recap Challenge
Part of the CSS Mastery section of Coddy's HTML journey — lesson 16 of 43.
Challenge
EasyStyle a gallery page using structural pseudo-classes. Your challenge is to:
- Style the first image in the gallery with a
3px solid rgb(0, 0, 255)border. - Give the last image in the gallery a special caption with red text.
- Use
:nth-childto give every odd-numbered image container a gray background (rgba(153, 153, 153, 1)).
Try it yourself
<!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>All lessons in CSS Mastery
1Selector Mastery – Combination
IntroductionDescendant SelectorChild SelectorAdjacent Sibling SelectorGeneral Sibling SelectorRecap Challenge3Structural pseudo-classes
Structural pseudo-classesTargeting the First ChildTargeting the Last ChildPattern Power: Using nth-childRecap Challenge